CSS Border-Image

CSS 的border-image属性允许在元素的边框上绘制图像，这使得绘制复杂的外观组件变得更加简单。

使用border-image时，将会替换掉border-style属性所设置的边框样式。

border-image 语法

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

示例

Codepen 在线演示

<div id="bitmap">文本内容</div>

#bitmap { 
  border: 20px solid transparent;
  padding: 0px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
  /* 
  border-image-source: url("https://mdn.mozillademos.org/files/4127/border.png");
  border-image-slice: 30;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-repeat: stretch; 
  */
}

border-image 的组合属性

border-image是以下几个属性组合的简写方式：

• border-image-source

• border-image-slice

• border-image-width

• border-image-outset

• border-image-repeat

border-image-source

border-image-source 属性被用于声明元素的边框图片的资源。

默认值为：none，此时不会使用图片边框

border-image-source: none; /* 默认值 */
border-image-source: url('https://developer.mozilla.org/media/examples/border-diamonds.png');
border-image-source: repeating-linear-gradient(45deg, transparent, #4d9f0c 20px);

border-image-slice

border-image-slice 属性被用于切割资源图片的区域，然后将其动态的应用到最终的边框图片。

border-image-slice会将资源分割成 9 个区域：四个角，四边以及中心区域

• 区域 1-4 为角区域（corner region）。 每一个都用一次来形成最终边界图像的角点。

• 区域 5-8 边区域（edge region）。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。

• 区域 9 为中心区域（ middle region）。它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作背景图像。

/* 所有的边 */
border-image-slice: 30%; 

/* 垂直方向 | 水平方向 */
border-image-slice: 10% 30%;

/* 顶部 | 垂直方向 | 底部 */
border-image-slice: 30 30% 45;

/* 上 右 下 左 */
border-image-slice: 7 12 14 5; 

/* 使用fill（fill可以放在任意位置） */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

border-image-width

border-image-width定义图像边框宽度。假如border-image-width大于已指定的border-width，那么它将向内部（padding/content）扩展。

border-image-width: all                        /* One-value syntax */       
/* E.g. border-image-width: 3; */
border-image-width: vertical horizontal        /* Two-value syntax */       
/* E.g. border-image-width: 2em 3em; */
border-image-width: top horizontal bottom      /* Three-value syntax */     
/* E.g. border-image-width: 5% 15% 10%; */
border-image-width: top right bottom left      /* Four-value syntax */      
/* E.g. border-image-width: 5% 2em 10% auto; */

border-image-width: inherit

border-image-outset

border-image-outset属性定义边框图像可超出边框盒的大小。

/* border-image-outset: sides */
border-image-outset: 30%;

/* border-image-outset:垂直 水平 */
border-image-outset: 10% 30%;

/* border-image-outset: 顶 水平 底 */
border-image-outset: 30px 30% 45px;

/* border-image-outset:顶 右 底 左  */
border-image-outset: 7px 12px 14px 5px;

border-image-repeat: inherit;

border-image-repeat

border-image-repeat定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

border-image-repeat: type                      /* One-value syntax */       
/* E.g. border-image-value: stretch; */
border-image-repeat: horizontal vertical       /* Two-value syntax */       
/* E.g. border-image-width: round space; */

border-image-repeat: inherit