HTML Dog
跳至导航

CSS 属性:border-image

由图像组成的边框。

一个简写属性,用于组合

可能的值

背景特性子值列表。可能的子值遵循与相应先前属性可能值相同的规则。子值列表遵循特定格式

[source] [slice] / [width] / [outset] [repeat]

完整示例:url("b.png") 33% fill / 10px 20px / 0.1 space

并非所有值都是必需的——任何其他被排除的值将默认为其初始值。“/”也仅用于前置宽度和外延部分。

基本示例:url("b.png") 33% space

inheritinitialunset 也可以单独使用。

示例


aside {
    border: 10px solid fuchsia;
    border-image: url("fluffy.png") 13 30 7 1 fill repeat;
}
/* - Establishes a 10-pixel wide border with a solid fuchsia-colored fallback.
   - Sets "fluffy.png" as the border image.
   - The image is sliced 13 pixels in from the top, 30 pixels in from the right, 7 pixels in from the bottom, 1 pixel in from the left and the middle portion is preserved.
   - Finally, the border image sides are set to repeat. */

浏览器支持

Can I Use border-image? 来自 caniuse.com 的关于 border-image 功能在主流浏览器中的支持情况的数据。