CSS 邊框影像
CSS 邊框圖片
使用 CSS border-image 屬性，您可以為元素的邊框設定影像。
CSS border-image 屬性
CSS border-image 屬性允許您為元素指定一個影像作為其正常邊框的替代。
該屬性有三個部分
- 用作邊框的影像
- 在哪裡切割影像
- 定義中間部分是重複還是拉伸
我們將使用以下影像（稱為“border.png”）
border-image 屬性會獲取影像並將其切成九個部分，就像井字棋盤一樣。然後，它將角放在角上，並根據您的指定重複或拉伸中間部分。
注意： 要使 border-image 生效，元素還需要設定 border 屬性！
在這裡，影像的中間部分被重複以建立邊框
影像作為邊框！
程式碼如下
示例
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
自己動手試一試 »
在這裡，影像的中間部分被拉伸以建立邊框
影像作為邊框！
程式碼如下
示例
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
自己動手試一試 »
提示： border-image 屬性實際上是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 屬性的簡寫屬性。
CSS border-image - 不同的切片值
不同的切片值會完全改變邊框的外觀
示例 1
border-image: url(border.png) 50 round;
示例 2
border-image: url(border.png) 20% round;
示例 3
border-image: url(border.png) 30% round;
程式碼如下
示例
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
自己動手試一試 »
CSS 邊框影像屬性
| 屬性 | 描述 |
|---|---|
| border-image | 設定所有 border-image-* 屬性的簡寫屬性 |
| border-image-source | 指定用作邊框的影像路徑 |
| border-image-slice | 指定如何切片邊框影像 |
| border-image-width | 指定邊框影像的寬度 |
| border-image-outset | 指定邊框影像區域超出邊框框的量 |
| border-image-repeat | 指定邊框影像是重複、圓角還是拉伸 |
