CSS3 的 border-image 属性可以让我们使用图片来替代传统的边框,它可以让我们创建出更加丰富多彩的边框效果。
border-image 属性是一个复合属性,它由四个子属性组成:border-image-source、border-image-slice、border-image-width 和 border-image-outset。
border-image: source slice width outset;
其中,border-image-source 是必须的,它用于指定要使用的图片。而 border-image-slice 用于指定图片分割的位置,可以是一个数字或者是一个关键字。如果使用数字,则表示将图片水平和垂直方向上都分割成相同大小的区块。如果使用关键字,则表示将图片水平方向上分割成不同大小的区块(top、right、bottom 和 left)。
border-image: url(images/border.png) 30 30 round;
而 border-image-width 用于控制边框的宽度(也就是说可以将原本 1px 的边框扩大到 10px 或者 20px 等等)。最后 border-image-outset 用于设置图片在边界之外的位置。
border: 10px solid; border-image: url(images/border.png) 30 30 round;
当然也可以使用 shorthand 属性来代表这几个子属性:
border: 10px solid; border: 10px solid url(images/border.png) 30 30 round;
此外还有一个 repeat 关键字可以用来重复图片来填充整个边界区域。例如 repeat 是水平方向上重复:
border: 10px solid; border: 10px solid url(images/border.png) 30 repeat;
border-image -width属性指定图像边界的宽度。
默认值: | 1 |
---|---|
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.borderImageWidth="30 30" |
border-image-width: number|%|auto;
注意: border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上,右,底部,左,两侧向内距离。如果第四个值被省略,它和第二个是相同的。如果也省略了第三个,它和第一个是相同的。如果也省略了第二个,它和第一个是相同的。负值是不允许的。
值 | 说明 |
---|---|
number | 表示相应的border-width 的倍数 |
% | 边界图像区域的大小:横向偏移的宽度的面积,垂直偏移的高度的面积 |
auto | 如果指定了,宽度是相应的image slice的内在宽度或高度 |
表格中的数字表示支持该属性的第一个浏览器版本号。
属性 |
|
|
|
|
|
---|---|---|---|---|---|
border-image-width | 15.0 | 11.0 | 13.0 | 6.0 | 15.0 |
指定图像边界的宽度:
CSS align-self 属性CSS 参考手册定义和用法align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。。注意:align-se...
CSS3 text-justify 属性实例Justification改变字与字之间的间距:div{text-align:justify;text-justify:inter-word;}浏览器支持...
CSS 参考手册实例不允许换行:p.test {text-wrap:none;}亲自试一试浏览器支持目前主流浏览器都不支持 text-wrap 属性。定义和用...
CSS 参考手册实例把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:div{width:100px;transition: width 2s;-moz-tr...
Javascript面向对象的设计 -JavaScript访问器属性属性访问器属性有两个附加属性。因为没有为存取器属性存储值,所以不需要[[Valu...