border-image-outset
border-image-outset CSS 屬性設定元素邊框圖片從其邊框盒向外延伸的距離。
透過 border-image-outset 在元素邊框盒外部渲染的邊框圖片部分不會觸發溢位捲軸，也不會捕獲滑鼠事件。
試一試
border-image-outset: 0;
border-image-outset: 15px;
border-image-outset: 30px;
border-image-outset: 40px;
<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;
}
語法
css
/* <length> value */
border-image-outset: 1rem;
/* <number> value */
border-image-outset: 1.5;
/* top and bottom | left and right */
border-image-outset: 1 1.2;
/* top | left and right | bottom */
border-image-outset: 30px 2 45px;
/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;
/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;
border-image-outset 屬性可以指定一個、兩個、三個或四個值。每個值都是一個 <length> 或 <number>。負值無效，會導致 border-image-outset 宣告被忽略。
- 如果指定了一個值，則應用於所有四個邊。
- 如果指定了兩個值，則第一個應用於頂部和底部，第二個應用於左側和右側。
- 如果指定了三個值，則第一個應用於頂部，第二個應用於左側和右側，第三個應用於底部。
- 如果指定了四個值，它們依次（順時針）應用於頂部、右側、底部和左側。
值
<length>-
border-image外延尺寸——一個帶單位的數值。 <number>-
border-image外延尺寸，作為元素相應border-width的倍數。例如，如果一個元素的border-width: 1em 2px 0 1.5rem，並且border-image-outset: 2，那麼最終的border-image-outset將被計算為2em 4px 0 3rem。
正式定義
| 初始值 | 0 |
|---|---|
| 應用於 | 所有元素，但在 border-collapse 為 collapse 時，內部表格元素除外。該屬性也適用於 ::first-letter。 |
| 繼承性 | 否 |
| 計算值 | 按指定值，但相對長度會轉換為絕對長度。 |
| 動畫型別 | 按計算值型別 |
正式語法
border-image-outset =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
示例
外延邊框影像
HTML
html
<div id="outset">This element has an outset border image!</div>
CSS
css
#outset {
width: 10rem;
background: #cceeff;
border: 1.4rem solid;
border-image: radial-gradient(#ffff22, #5555ff) 40;
border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */
margin: 2.1rem;
}
結果
規範
| 規範 |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-outset |
瀏覽器相容性
載入中…
另見
- 背景和邊框
- 學習 CSS：背景和邊框
- MDN 部落格上的《CSS 中的邊框影像：Interop 2023 的一個重點關注領域》（2023 年）