border-image-source
試一試
border-image-source: url("/shared-assets/images/examples/border-diamonds.png");
border-image-source: url("/shared-assets/images/examples/border-stars.png");
border-image-source: repeating-linear-gradient(
45deg,
transparent,
#4d9f0c 20px
);
border-image-source: none;
<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-image-slice 屬性用於將源影像劃分為區域，然後將這些區域動態應用於最終的邊框影像。
語法
css
/* Keyword value */
border-image-source: none;
/* <image> values */
border-image-source: url("image.jpg");
border-image-source: linear-gradient(to top, red, yellow);
/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;
值
none-
不使用邊框影像。而是顯示由
border-style定義的外觀。 <image>-
用於邊框的影像引用。
正式定義
| 初始值 | none |
|---|---|
| 應用於 | 所有元素，但在 border-collapse 為 collapse 時，內部表格元素除外。該屬性也適用於 ::first-letter。 |
| 繼承性 | 否 |
| 計算值 | none 或其 URI 絕對化的影像 |
| 動畫型別 | 離散 |
正式語法
border-image-source =
none |
<image>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
基本示例
css
.box {
border-image-source: url("image.png");
}
規範
| 規範 |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-source |
瀏覽器相容性
載入中…
另見
borderoutlinebox-shadowbackground-image<url>型別- MDN 部落格上的《CSS 中的邊框影像：Interop 2023 的一個重點關注領域》（2023 年）