css3新增屬性是什么

這篇文章主要介紹css3新增屬性是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　一、css3新增邊框屬性

　　1、css3新增屬性之border-color：為邊框設置多種顏色

　　p

　　{

　　border-style:solid;

　　border-color:#ff0000#0000ff;

　　}

　　這里說一下題外話，需要注意："border-width"屬性如果單獨使用的話是不會起作用的。請首先使用"border-style"屬性來設置邊框。

　　2、css3新增屬性之border-image：圖片邊框

　　css3的border-image屬性是使用圖片來創建邊框

　　div

　　{

　　-webkit-border-image:url(border.png)3030round;/*Safari5*/

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

　　border-image:url(border.png)3030round;

　　}

　　注意：InternetExplorer不支持border-image屬性；border-image屬性規定了用作邊框的圖片。

　　3、css3新增屬性之border-radius：圓角邊框

　　div

　　{

　　border:2pxsolid;

　　border-radius:25px;

　　}

　　4、css3新增屬性之box-shadow：陰影效果

　　css3中box-shadow用于向方框添加陰影

　　div

　　{

　　box-shadow:10px10px5px#888888;

　　}

　　二、css3新增背景屬性

　　1、css3新增屬性之background-size：指定背景圖片尺寸

　　在CSS3之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在CSS3中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重復使用背景圖片。您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸，那么尺寸相對于父元素的寬度和高度。

　　div

　　{

　　background:url(img_flwr.gif);

　　background-size:80px60px;

　　background-repeat:no-repeat;

　　}

　　2、css3新增屬性之background-origin：指定背景圖片從哪里開始顯示

　　背景圖片可以放置于content-box、padding-box或border-box區域。

　　div

　　{

　　background-image:url('smiley.gif');

　　background-repeat:no-repeat;

　　background-position:left;

　　background-origin:content-box;

　　}

　　3、css3新增屬性之background-clip：指定背景圖片從什么位置開始裁剪

　　div

　　{

　　background-color:yellow;

　　background-clip:content-box;

　　}

　　三、css3新增文字效果

　　1、css3新增屬性之text-shadow：文本陰影

　　h2

　　{

　　text-shadow:5px5px5px#FF0000;

　　}

　　說明:

　　(1)<顏色>和<模糊半徑>是可選的,當<顏色>未指定時,將使用文本顏色;當<模糊半徑>未指定時,半徑值為0；

　　(2)shadow可以是逗號分隔的列表,如:text-shadow:2px2px2px#ccc,3px3px3px#ddd;

　　(3)陰影效果會按照shadowlist中指定的順序應用到元素上；

　　(4)這些陰影效果有可能相互重疊,但不會疊加文本本身；

　　(5)陰影可能會跑到容器的邊界之外,但不會影響容器的大小。

以上是“css3新增屬性是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！