1. Web
  2. CSS
  3. border-image-width

border-image-width

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

border-image-width CSS 屬性設定元素邊框圖片的寬度。

試一試

border-image-width: 30px;

border-image-width: 15px 40px;

border-image-width: 2.6rem;

border-image-width: 20% 8%;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

如果此屬性的值大於元素的 border-width，則邊框影像將超出內邊距（和/或內容）邊緣。

語法

css
/* Keyword value */
border-image-width: auto;

/* <length> value */
border-image-width: 1rem;

/* <percentage> value */
border-image-width: 25%;

/* <number> value */
border-image-width: 3;

/* top and bottom | left and right */
border-image-width: 2em 3em;

/* top | left and right | bottom */
border-image-width: 5% 15% 10%;

/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;

border-image-width 屬性可以使用下面值列表中選擇的一個、兩個、三個或四個值來指定。

  • 當指定一個值時，它將相同的寬度應用於所有四個邊。
  • 當指定兩個值時，第一個寬度應用於頂部和底部，第二個寬度應用於左側和右側。
  • 當指定三個值時，第一個寬度應用於頂部，第二個寬度應用於左側和右側，第三個寬度應用於底部。
  • 當指定四個值時，寬度按頂部、右側、底部和左側的順序（順時針）應用。

值

<length-percentage>

邊框的寬度，指定為 <length> 或 <percentage>。百分比是相對於邊框影像區域的寬度（用於水平偏移）和邊框影像區域的高度（用於垂直偏移）。不能為負值。

<number>

邊框的寬度，指定為相應 border-width 的倍數。不能為負值。

auto

邊框的寬度等於相應 border-image-slice 的固有寬度或高度（以適用者為準）。如果影像不具有所需的固有尺寸，則改用相應的 border-width。

正式定義

初始值1
應用於所有元素，但在 border-collapse 為 collapse 時，內部表格元素除外。該屬性也適用於 ::first-letter。
繼承性否
百分比參照邊框影像區域的寬度或高度
計算值按指定值，但相對長度會轉換為絕對長度。
動畫型別按計算值型別

正式語法

border-image-width = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<length-percentage> = 
  <length>      |
  <percentage>

示例

平鋪邊框影像

此示例使用以下 90 x 90 畫素的“.png”檔案建立邊框影像

Square image containing eight circles. The circles in each corner are light purple. The four side circles are blue. The area in the middle, where a ninth circle could fit, is blank.

因此，源影像中的每個圓圈都是 30 x 30 畫素。

HTML

html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

CSS

css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

結果

規範

規範
CSS Backgrounds and Borders Module Level 3
# border-image-width

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者於 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.