Style borderImageWidth 属性
规定图像边框的宽度:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>蜜蜂教程(mifengjc.com)</title> <style> div { background-color: lightgrey; border: 30px solid transparent; border-image: url("/examples/border.png"); border-image-slice: 30; border-image-width: 10px; border-image-outset: 0; border-image-repeat: round; } </style> </head> <body> <div id="main"> <p> 这是一个使用图像作为边框的 DIV 元素。 </p> </div> <p>点击“尝试一下”按钮改变 borderImageWidth 属性的值。</p> <button onclick="myFunction()">尝试一下</button> <script> function myFunction() { document.getElementById("main").style.borderImageWidth = "20px 30px"; } </script> <p><b>注意:</b>Internet Explorer 10、Opera 和 Safari 5 不支持 borderImageWidth 属性。</p> </body> </html>
定义和用法
borderImageWidth 属性规定图像边框的宽度。
浏览器支持
Opera 不支持 borderImageWidth 属性。
Internet Explorer 10 及其之前的版本不支持 borderImageWidth 属性。
Safari 5 及其之前的版本不支持 borderImageWidth 属性。
请参阅 borderImage 属性来替代它!
语法
返回 borderImageWidth 属性:
object.style.borderImageWidth
设置 borderImageWidth 属性:
object.style.borderImageWidth = "number|%|auto|initial|inherit"
属性值
值 | 描述 |
---|---|
length | 一个规定边框宽度大小的长度单位(px)。A length unit (px) specifying the size of the border-width |
number | 默认值是 1。表示相应的边框宽度的倍数。 |
% | 相对于边框图像区域大小的百分比:水平偏移参照区域的宽度,垂直偏移参照区域的高度。 |
auto | 如果规定了该属性,宽度是相应图像切片固有的宽度或高度。 |
initial | 设置该属性为它的默认值。请参阅 initial。 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
技术细节
默认值: | 1 |
---|---|
返回值: | 字符串,表示元素的 border-image-width 属性。 |
CSS 版本 | CSS3 |
相关文章
CSS 参考手册:border-image-width 属性