border-image-outset

版本： CSS3

border-image-outset 属性定义边框图像可超出边框盒的大小。

示例 

/* border-image-outset: sides */
border-image-outset: 30%;

/* border-image-outset:垂直 水平 */
border-image-outset: 10% 30%;

/* border-image-outset:  顶 水平 底 */
border-image-outset: 30px 30% 45px;

/* border-image-outset:顶 右 底 左 */
border-image-outset: 7px 12px 14px 5px;

border-image-repeat: inherit;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
IE11以上版本的浏览器都支持 border-image-outset

语法

border-image-outset : sides | horizontal vertical | top bottom right left | inherit
  • 当指定一个值时，它对所有四个边应用相同的数值。
  • 当指定两个值时，第一个宽度应用于顶部和底部，第二个宽度应用于左侧和右侧。
  • 当指定三个值时，第一个宽度应用于顶部，第二个宽度应用于左侧和右侧，第三个宽度应用于底部。
  • 当指定四个值时，宽度将按顺时针顺序应用于顶部、右侧、底部和左侧。

取值：

  • sides ：边框图像在四个方向超出边框盒的 <length> 或 <number> 数量。
  • horizontal ：边框图像在水平方向（左和右）超出边框盒的 <length> 或 <number> 数量。
  • vertical ：边框图像在垂直方向（上和下）超出边框盒的 <length> 或 <number> 数量。
  • top ：边框图像在上方超出边框盒的 <length> 或 <number> 数量。
  • bottom ：边框图像在下方超出边框盒的 <length> 或 <number> 数量。
  • right ：边框图像在右方超出边框盒的 <length> 或 <number> 数量。
  • left ：边框图像在左方超出边框盒的 <length> 或 <number> 数量。
  • inherit ：四个方向的值都继承于父元素的该属性计算后值。
默认值 0
适用于 所有元素，除table元素设置了 border-collapse:collapse 之外
继承性 无
动画性 否
计算值 指定值

实例 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
 border:15px solid;
 padding:30px;
 border-image:url(images/kuang.jpg) 100 round;
 border-image-outset:1px 10px 8px;
}
</style>
</head>
<body>
<p>CSS学编程</p>
</body>
</html>

效果图：

上篇： border-image-width

下篇： border-image-repeat