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 的倍数 | 尝试一下 » |