css3简介

The border-radius property allows you to add rounded corners to elements.

 
  
 New options for borders in CSS3 : 
  
 In firefox  http://www.css3.info/preview/colored-border/ 
  
 

---

阴影

---

边框背景图

Here, the image is tiled (repeated) to fill the area.

Here, the image is stretched to fill the area.

 
  
 还能细分为: 
  
 border-image: 
  
 border-top-image 
  
 border-right-image 
  
 border-bottom-image 
  
 border-left-image 
  
 border-corner-image: 
  
 border-top-left-image 
  
 border-top-right-image 
  
 border-bottom-left-image 
  
 border-bottom-right-image 
    
  
 

---

背景图大小

below is small pic

---

背景起始点

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt

---

多个背景图

---

字体阴影

Text-shadow effect!

Note: Internet Explorer does not support the text-shadow property.

---

2D Transform - 2D 变换

asdfasfsdfasdfsadfsfsdfasdfasfasfsafasdfsadf

倾斜

所有情况

---

3D Transform - 3D 变换

 
  
 
  正面 
  
 
   | 
  
 
    | 
  
 
     | 
  
 
      | 
  
 
   
  
   朝上 
    
  
 

 > 
  
 
  正面 
  
 
   | 
  
 
    | 
  
 
     | 
  
 
      | 
  
 
   
  
   朝上 
    
  
 

 
  
 
  正面 
  
 
   | 
  
 
    | 
  
 
     | 
  
 
      | 
  
 
   
  
   朝上 
    
  
 

还有很多和2D类似的就不一一列举了.

---

 
  
 Transitions - 过度 
  
 当一个元素的style发生改变的时候, 没有transitions的时候是立即显示效果的, 有了之后是有一个过度效果的 
  
 

 οnclick="doIt()"/>

>

>

---

 




Animation -  动画

 
  
    
  
 没有提到 
  
 Color 
  
   
  
 HSL colors 
  
 HSLA colors 
  
 opacity 
  
 RGBA colors