Style borderImage 属性

指定作为 div 元素周围边框的图像：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    #myDIV {
      border: 15px solid transparent;
      width: 250px;
      padding: 10px 20px;
      -webkit-border-image: url(border.png) 30 30 stretch;
      /* Safari 5 */
      -o-border-image: url(border.png) 30 30 stretch;
      /* Opera 12 */
      border-image: url(border.png) 30 30 stretch;
    }
  </style>
</head>
<body>

  <p>点击“尝试一下”按钮改变 DIV 元素的 border-image 属性：</p>
  <button onclick="myFunction()">尝试一下</button>
  <div id="myDIV">
    <h1>您好</h1>
  </div>
  <script>
    function myFunction() {
      document.getElementById("myDIV").style.borderImage = "url(border.png) 30 30 round";
      document.getElementById("myDIV").style.WebkitBorderImage = "url(border.png) 30 30 round"; /* 针对 Safari 5 的代码 */
      document.getElementById("myDIV").style.OBorderImage = "url(border.png) 30 30 round"; /* 针对 Opera 12 的代码 */
    }
  </script>

</body>
</html>

尝试一下 »

定义和用法

borderImage 属性是设置 borderImageSource、 borderImageSlice、 borderImageWidth、 borderImageOutset 和 borderImageRepeat 属性的速记属性。

省略的值被设置为它们的默认值。

浏览器支持

Internet Explorer 11、Firefox、Opera 15、Chrome 和 Safari 6 支持 borderImage 属性。

Safari 5 支持另一个可替代该属性的属性，即 webkitBorderImage 属性。

语法

返回 borderImage 属性：

object.style.borderImage

设置 borderImage 属性：

object.style.borderImage = "source slice width outset repeat|initial|inherit"

属性值

值	描述
borderImageSource	要用于绘制边框的图像的路径。
borderImageSlice	图像边框的向内偏移。
borderImageWidth	图像边框的宽度。
borderImageOutset	边框图像区域超出边界框的量。
borderImageRepeat	规定图像边框是重复拼接图块还是延伸图块。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。