border-image

语法：

border-image：border-image-source || border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? || border-image-repeat

默认值：看每个独立属性

适用于：看每个独立属性

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

媒　体：视觉

取值：

border-image-source：
定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。
border-image-slice：
定义元素边框背景图像从什么位置开始分割。
border-image-width：
定义元素边框背景图像厚度。
border-image-outset：
定义元素边框背景图像的外延尺寸。
border-image-repeat：
定义元素边框背景图像的平铺方式。

说明：

简写属性。定义将图像应用到元素的边框上

  • 使用图像替代border-style去定义边框样式。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。

    示例：

    .test { border: 10px solid gray; border-image: url(test.png) 10/10px; }

    如果例子中的图片不可见，或者未被加载，则会以border的定义呈现，如果图片载入成功，则以border-image的定义呈现。

  • border-image属性生效的前提是定义了border-width和border-style。
  • 对应的脚本特性为：borderImage。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 10.0 40.0-49 #2 40.0-50.0 #1 #2 8.0-9.0 #1 #2 #3 40.0+ #2 8.0-9.2 #1 #2 #3 4.4-62.0 #1 #2 40.0-50.0 #1 #2
11.0 50.0+ 51.0-64.0 #2 9.1-11.1 #1 9.3-11.3 #1 51.0-64.0 #2
12.0-13.0 #1
14.0+
  1. 当border-style属性值为none时，border-image仍然会奏效，See；
  2. 不支持border-image-repeat属性的space取值；
  3. 不支持border-image-repeat属性的round取值；

示例：