CSS3 邊框

使用 CSS3，你可以將影象應用於元素的邊框。

使用 CSS3 邊框

CSS3 提供了兩個新屬性，用於以更優雅的方式設定元素的邊框樣式 - border-image 用於將影象新增到邊框的 border-radius 屬性，以及用於在不使用任何影象的情況下製作圓角的屬性。

以下部分將介紹 CSS3 的這些新邊框屬性，對於其他與邊框相關的屬性，請檢視 CSS 邊框 教程。

建立 CSS3 圓角

border-radius 屬性可用於建立圓角。此屬性通常定義外邊框邊角的形狀。在 CSS3 之前，切片影象用於建立相當麻煩的圓角。

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

新增 CSS3 邊框影象

border-image 屬性允許你指定影象作為元素的邊框。
邊框的設計是從 border-image 源 URL 中指定的影象的邊和角建立的。可以以各種方式對邊界影象進行切片，重複，縮放和拉伸以適合邊界影象區域的大小。

.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;
} 

提示： 圓形選項是重複選項的變體，它以這樣的方式分佈影象切片，使得端部連線良好。