border-image

  • 版本:CSS3
  • 2018.3.7

语法:

border-imageborder-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-imagenone或图像不可见时,将会显示border-style所定义的边框样式效果。

    示例:

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

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

  • border-image属性生效的前提是定义了border-widthborder-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取值;

示例:

关注编程学问公众号