CSS - border-image-outset 属性

CSS 的 **border-image-outset** 属性定义了边框图像区域超出边框框的距离，有效地将边框图像从元素的内容和边框边缘推得更远。

语法

border-image-outset: length | number | initial | inherit;

属性值

值	描述
长度	它指定了图像到边框的距离。可以使用任何长度单位。默认值为 0。
数字	它指定边框宽度的倍数。
initial	这将属性设置为其默认值。
inherit	这从父元素继承属性。

CSS 边框图像突出属性示例

以下示例使用不同的值说明了 **border-image-outset** 属性。

使用长度值的边框图像突出属性

outset 参数决定了图像到边框的距离，此距离可以通过长度来指定（10px、50px 等）。在以下示例中，**border-image-outset** 属性使用了三个不同的长度值来突出显示差异。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         display: grid;
         justify-content: center;
      }

      .outer-box {
         margin-top: 45px;
         margin-bottom: 20px;
         padding: 20px;
         background-color: lightgreen;
         height: 200px;
         width: 200px;

      }

      .inner {
         height: 100px;
         width: 100px;
         padding: 35px;
         border: 15px solid transparent;
         border-image: 
         url('/css/images/white-flower.jpg') 20 round;
      }

      .inner-box1 {
         border-image-outset: 5px;
      }

      .inner-box2 {
         border-image-outset: 25px;
      }

      .inner-box3 {
         border-image-outset: 42px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-image property
   </h2>
   <div class="outer-box">
      <div class="inner-box1 inner">
         <p>
            This box has 5px outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box2 inner">
         <p>
            This box has 25px outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box3 inner">
         <p>
            This box has 42px outset
         </p>
      </div>
   </div>

</body>

</html>

使用数值的边框图像突出属性

边框的距离也可以通过数值来指定（2、4 等），它们表示边框宽度的倍数。在以下示例中，**border-image-outset** 属性使用了三个不同的数值来突出显示差异。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         display: grid;
         justify-content: center;
      }

      .outer-box {
         margin-top: 45px;
         margin-bottom: 30px;
         padding: 20px;
         background-color: lightgreen;
         height: 200px;
         width: 200px;

      }

      .inner {
         height: 100px;
         width: 100px;
         padding: 35px;
         border: 15px solid transparent;
         border-image: 
         url('/css/images/white-flower.jpg') 20 round;
      }

      .inner-box1 {
         border-image-outset: 1;
      }

      .inner-box2 {
         border-image-outset: 2;
      }

      .inner-box3 {
         border-image-outset: 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-image property
   </h2>
   <div class="outer-box">
      <div class="inner-box1 inner">
         <p>
            This box has 1 value outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box2 inner">
         <p>
            This box has 2 value outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box3 inner">
         <p>
            This box has 4 value outset
         </p>
      </div>
   </div>

</body>

</html>

使用多个值的边框图像突出属性

**border-image-outset** 属性最多可以接受四个值。单个值应用于所有边框，两个值设置顶部/底部和左侧/右侧，三个值覆盖顶部、右侧和底部，四个值分别指定每个边框。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         display: grid;
         justify-content: center;
      }

      .outer-box {
         margin-top: 45px;
         margin-bottom: 30px;
         padding: 20px;
         background-color: lightgreen;
         height: 200px;
         width: 200px;

      }

      .inner {
         height: 100px;
         width: 100px;
         padding: 35px;
         border: 15px solid transparent;
         border-image: 
         url('/css/images/white-flower.jpg') 20 round;
      }

      .inner-box1 {
         border-image-outset: 1;
      }

      .inner-box2 {
         border-image-outset: 20px 40px;
      }

      .inner-box3 {
         border-image-outset: 2 4 5;
      }

      .inner-box4 {
         border-image-outset: 15px 20px 45px 55px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-image property
   </h2>
   <div class="outer-box">
      <div class="inner-box1 inner">
         <p>
            This box has single outset, 
            all borders have same outset
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box2 inner">
         <p>
            This box has 2 outset values, 
            top and bottom have one outset, left 
            and right have another outset.
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box3 inner">
         <p>
            This box has 3 outset values, 
            top has one outset, right has one 
            outset and bottom has one outset.
         </p>
      </div>
   </div>
   <div class="outer-box">
      <div class="inner-box4 inner">
         <p>
            This box has 4 outset values, 
            top has one outset, right has one outset,
            bottom has one outset and left 
            has one outset.
         </p>
      </div>
   </div>

</body>

</html>

支持的浏览器

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

css_properties_reference.htm

打印页面