CSS3 border-image-outset 属性

设置border-img-outset属性：

div
{
    border-image-source: url(border.png);
    border-image-outset: 30 30;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-image-outset 15.0 11.0 15.0 6.0 15.0

属性定义及使用说明

border-image-outset用于指定在边框外部绘制 border-image-area 的量

默认值: 0
继承: no
版本: CSS3
JavaScript 语法: object.style.borderImageOutset="30 30"

语法

border-image-outset: length|number;

注意： border-image-outset用于指定在边框外部绘制 border-image-area 的量。包括上下部和左右部分。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。不允许border-im-outset拥有负值。 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      border: 15px solid transparent;
      padding: 15px;
      border-image: url(border.png);
      border-image-slice: 30;
      border-image-repeat: round;
      border-image-outset: 10px 5px 2px;
    }
  </style>
</head>
<body>
  <div id="myDIV">
    <b>Note:</b> Internet Explorer 10 及其更早版本不支持 border-image-outset 属性。
  </div>
</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      border: 15px solid transparent;
      padding: 15px;
      border-image: url(border.png);
      border-image-slice: 30;
      border-image-repeat: round;
      border-image-outset: 1 0 1 1;
    }
  </style>
</head>
<body>
  <div id="myDIV">
    <b>Note:</b> Internet Explorer 10 及其更早版本不支持 border-image-outset 属性。
  </div>
</body>
</html>

尝试一下 »

值 描述 实例
length 设置边框图像与边框（border-image）的距离，默认为0。 尝试一下 »
number 代表相应的 border-width 的倍数 尝试一下 »