此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
border-image-source
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
尝试一下
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> <div>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: #000; border: 30px solid; border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 round; font-size: 1.2em;}border-image-slice 属性用于将源图像分割为多个区域，然后动态地应用到最终的边框图像。
语法
css
/* 关键字值 */border-image-source: none;/* <image> 值 */border-image-source: url(image.jpg);border-image-source: linear-gradient(to top, red, yellow);/* 全局值 */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 |
|---|---|
| 适用元素 | all elements, except internal table elements whenborder-collapse iscollapse. It also applies to::first-letter. |
| 是否是继承属性 | 否 |
| 计算值 | none or the image with its URI made absolute |
| 动画类型 | 离散值 |
形式语法
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");}规范
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-source |