w3study.net

border-image-source CSS 属性设置用以创建元素边框图像的源图像。

{{InteractiveExample("CSS Demo: border-image-source")}}

```css interactive-example-choice border-image-source: url("/shared-assets/images/examples/border-diamonds.png");

```css interactive-example-choice
border-image-source: url("/shared-assets/images/examples/border-stars.png");

```css interactive-example-choice border-image-source: repeating-linear-gradient( 45deg, transparent, #4d9f0c 20px );

```css interactive-example-choice
border-image-source: none;

```html interactive-example

This is a box with a border around it.

```css interactive-example
#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;
}

{{cssxref("border-image-slice")}} 属性用于将源图像分割为多个区域，然后动态地应用到最终的边框图像。

语法

/* 关键字值 */
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
  • : 不使用边框图像，而由 {{cssxref("border-style")}} 定义所展现的外观。
• {{cssxref("<image>")}}
  • : 用作边框的图片引用。

形式定义

{{CSSInfo}}

形式语法

{{csssyntax}}

示例

基础示例

.box {
  border-image-source: url("image.png");
}