1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. Properties
  5. border-image-source

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

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 CSS 属性设置用以创建元素边框图像的源图像。

尝试一下

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: #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 when border-collapse is collapse. 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

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content