CSS3 border-image-width 属性
CSS3 border-image-width 属性
概述
CSS3 border-image-width
属性定义了一个元素边框的宽度,用于配合 border-image-source
属性来渲染图像边框。此属性的默认值为1,它可以像其它CSS属性一样定义为像素、百分比、长度单位等。
语法
border-image-width: 1|2|3|4|5|6|7|8|9|10|.../* <length> | <percentage> | <number> | auto | initial | inherit */;
属性值
<length>
: 可以是固定长度,例如 10px,也可以使用 em,ex 等单位。<percentage>
: 可以是元素宽度或高度的百分比值。auto
: 使用图片原始大小作为边框宽度。<number>
: 该数值将乘以border-width
以确定插入到哪些边缘的偏移量。它们使您能够让图片的设置与实际边框挂钩。initial
: 声明应该采用默认值。inherit
: 从父元素继承此属性的值。
示例
border-image-source: url(border-image.png);
border-image-width: 10px 20px 30px 40px;
上述代码将会显示一个带有图像边框(border-image)的元素,所有的边框都像表现为一条宽度为10像素、20像素、30像素和40像素的线条。如果将某个属性值定义为 “auto”,则形状和大小会根据源图片来自动调整。
注意事项
border-image-width
属性不能在使用border-style
为none
的元素上使用,也不能用于outline
。- 当定义为百分比时,将基于包含块的宽度进行计算。
- 当使用
number
定义,则必须设置border-width
属性。
浏览器兼容性
- Internet Explorer 11:支持该属性。
- Microsoft Edge:支持该属性。
- Firefox:支持该属性。
- Chrome:支持该属性。
- Safari:支持该属性。
- Opera:支持该属性。
总结
border-image-width
属性与CSS3中的其他属性密切相关,一般情况下需要搭配 border-image-source
属性使用。通过其精细的属性值定义,我们可以创建出非常优美、高可用、样式良好的网页边框。在Web应用程序中,良好的设计总是令人注目和令人欣赏的。因此,优秀的定义 border-image-width
的技巧是开发者需要有的基本技能之一。