邊框：

• border-radius?用于創建圓角 div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ }
• box-shadow?用于向方框添加陰影 div { box-shadow: 10px 10px 5px #888888; }
• border-image?使用圖片來創建邊框 div { border-image:url(border.png) 30 30 round; /*stretch為邊框拉伸，round是平鋪*/ -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */

?

-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */

?

?

-o-border-image:url(border.png) 30 30 round; /* Opera */
}

?

背景：

• background-size?規定背景圖片的尺寸,以像素或百分比規定尺寸
• background-origin?規定背景圖片的定位區域,可以放置于 content-box、padding-box 或 border-box 區域
• 可以放置多個背景

body{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}

文本：

• text-shadow?向文本應用陰影，規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色 h1 { text-shadow: 5px 5px 5px #FF0000; }
• word-wrap?允許文本強制進行換行 - 即使這意味著會對單詞進行拆分 p {word-wrap:break-word;}

字體：

? ? ? @font-face 規則

<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */ }div { font-family:myFirstFont; } </style>

?

2D變化：

• translate()?元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數
• rotate()?元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉
• scale()?元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數 div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ } /*值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。
• skew()?元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數
• matrix()?把所有 2D 轉換方法組合在一起,需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素

3D變化：

• rotateX()?元素圍繞其 X 軸以給定的度數進行旋轉
• rotateY()?元素圍繞其 Y 軸以給定的度數進行旋轉。

過渡：transition元素從一種樣式逐漸改變為另一種的效果,區別2D3D是過渡有一個變化過程

• 規定您希望把效果添加到哪個 CSS 屬性上
• 規定效果的時長 div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } div:hover { width:300px; }/*當鼠標指針懸浮于 <div> 元素上時寬度變化，當指針移出元素時，它會逐漸變回原來的寬度*/

動畫：過渡設置元素屬性的變化過程，動畫可以設置自身屬性和元素所在位置的變化

@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

@keyframes myfirst //動畫名稱
{ 0% {background: red;} //各時刻變化的css樣式
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} div { animation: myfirst 5s; //動畫名稱 動畫時間 -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }

多列：

• column-count?規定元素應該被分隔的列數
• column-gap?規定列之間的間隔
• column-rule?設置列之間隔斷的寬度、樣式和顏色規則。

用戶界面：

• resize?規定是否可由用戶調整元素尺寸
• box-sizing?允許您以確切的方式定義適應某個區域的具體內容
• outline-offset?對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓

div { border:2px solid black; outline:2px solid red; outline-offset:15px; }

?

轉載于:https://www.cnblogs.com/clairexia/p/6636916.html

總結

以上是生活随笔為你收集整理的CSS3新属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。