CSS 用於控制網頁的樣式和佈局。函數
CSS3 是最新的 CSS 標準。佈局
CSS3新增了不少的屬性,下面一塊兒來分析一下新增的一些屬性:學習
1.CSS3邊框:動畫
- border-radius:CSS3圓角邊框。在 CSS2 中添加圓角矩形須要技巧,咱們必須爲每一個圓角使用不一樣的圖片,在 CSS3 中,建立圓角是很是容易的,在 CSS3 中,border-radius 屬性用於建立圓角。border:2px solid;
- box-shadow:CSS3邊框陰影。在 CSS3 中,box-shadow 用於向方框添加陰影。box-shadow:10px 10px 5px #888888;
- border-image:CSS3邊框圖片。經過 CSS3 的 border-image 屬性,您可使用圖片來建立邊框。border-image:url(border.png) 30 30 round;
2.CSS3背景:url
- background-size: 屬性規定背景圖片的尺寸。在 CSS3 以前,背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中,能夠規定背景圖片的尺寸,這就容許咱們在不一樣的環境中重複使用背景圖片。您可以以像素或百分比規定尺寸。若是以百分比規定尺寸,那麼尺寸相對於父元素的寬度和高度。
- background-origin :屬性規定背景圖片的定位區域。背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。
3.CSS3文字效果:spa
- text-shadow:在 CSS3 中,text-shadow 可向文本應用陰影。text-shadow:5px 5px 5px #FFFFFF;
- word-wrap :單詞太長的話就可能沒法超出某個區域,容許對長單詞進行拆分,並換行到下一行:p{word-wrap:break-word;}
4.CSS3 2D轉換:orm
transform:經過 CSS3 轉換,咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。圖片
5.CSS3 3D轉換:
- rotateX():元素圍繞其 X 軸以給定的度數進行旋轉。transform:rotateX(120deg);
- rotateY():元素圍繞其 Y 軸以給定的度數進行旋轉。transform:rotateY(120deg);
6.CSS3 過渡:當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。
7.CSS3動畫:經過 CSS3,咱們可以建立動畫,這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
8.CSS3多列:
- column-count:屬性規定元素應該被分隔的列數。
- column-gap:屬性規定列之間的間隔。
- column-rule :屬性設置列之間的寬度、樣式和顏色規則。
9.CSS3用戶界面:
- resize:屬性規定是否可由用戶調整元素尺寸。
- box-sizing:屬性容許您以確切的方式定義適應某個區域的具體內容。
- outline-offset :屬性對輪廓進行偏移,並在超出邊框邊緣的位置繪製輪廓。
以上呢,就是我對CSS3新增的一些屬性的瞭解,但願對學習的你們有所幫助。