免費AI編程助手
CSS3 邊框
2022-05-26 15:58 更新
用CSS3，您可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序（如Photoshop等作圖軟件），極大地幫助您節(jié)省了很多時間。
而在本節(jié)中，您將了解以下的邊框?qū)傩杂校?/p>
-
border-radius
-
box-shadow
-
border-image（需要注意的是：該屬性不支持ie瀏覽器）
Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。
Firefox、Chrome 以及 Safari 支持所有新的邊框?qū)傩浴?/p>
注釋：對于 border-image，Safari 5 以及更老的版本需要前綴 -webkit-。
Opera 支持 border-radius 和 box-shadow 屬性，但是對于 border-image 需要前綴 -o-。
CSS3 圓角
在CSS2中添加圓角是需要一些技巧的，尤其對于新手來說更加難了，所有我們不得不在每個角落使用不同的圖像。
但是如果您在CSS3中，就能夠很容易創(chuàng)建圓角。在CSS3中border-radius屬性就是被用于創(chuàng)建圓角的：
以下示例即：圓角邊框，您可以嘗試著做一個！
CSS3盒陰影
CSS3中的box-shadow屬性被用來添加陰影:
CSS3邊界圖片
有了CSS3的border-image屬性，你可以使用圖像創(chuàng)建一個邊框：
border-image屬性允許你指定一個圖片作為邊框！用于創(chuàng)建上文邊框的原始圖像：
在div中使用圖片創(chuàng)建邊框:
實例
在div中使用圖片創(chuàng)建邊框
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
嘗試一下 ?
新邊框?qū)傩?/h2>
| 屬性 | 說明 | CSS |
|---|---|---|
| border-image | 設置所有邊框圖像的速記屬性。 | 3 |
| border-radius | 一個用于設置所有四個邊框- *-半徑屬性的速記屬性 | 3 |
| box-shadow | 附加一個或多個下拉框的陰影 | 3 |
以上就是本節(jié)的全部內(nèi)容，關(guān)于CSS3邊框，您是否學會了呢？如果還是有些疑惑，建議您多看幾遍，或者對著上文中的示例多做幾遍！
以上內(nèi)容是否對您有幫助：
← CSS3 簡介
更多建議：