设置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拥有负值。
| 值 |
描述 |
实例 |
| length
|
设置边框图像与边框（border-image）的距离，默认为0。 |
尝试一下 » |
<!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>
尝试一下 »
| number
|
代表相应的 border-width 的倍数 |
尝试一下 » |
<!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>
尝试一下 »