CSS3 邊框(Border)

使用CSS3，可以將圖像應(yīng)用于元素的邊框上。

使用CSS3邊框

CSS3提供了兩個新屬性，用于以更加優(yōu)雅的方式對元素的邊框進行樣式設(shè)置- border-image用于將圖像添加到邊框的border-radius屬性，以及用于在不使用任何圖像的情況下制作圓角的屬性。

下一節(jié)將向您介紹CSS3的這些新邊框?qū)傩?，有關(guān)其他與邊框相關(guān)的屬性，請查看CSS邊框教程。

創(chuàng)建CSS3圓角

該border-radius屬性可用于創(chuàng)建圓角。此屬性通常定義外邊界邊緣的角的形狀。在CSS3之前，切片圖像用于創(chuàng)建相當(dāng)麻煩的圓角。

.box {
    width: 300px;
    height: 150px;
    background: #ffb6c1;
    border: 2px solid #f08080;
    border-radius: 20px;
}

添加CSS3邊框圖像

border-image屬性允許您指定圖像以用作元素的邊框。
邊框的設(shè)計是從border-image源URL中指定的圖像的側(cè)面和角落創(chuàng)建的。可以以各種方式對邊界圖像進行切片，重復(fù)，縮放和拉伸以適合邊界圖像區(qū)域的大小。

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("border.png") 30 30 round;
}