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

列印頁面