CSS学习笔记：border-image

时间：2022-11-14 13:22:11

border-image 属性能给元素的边框添加背景图片。
使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式。

语法

border-image其实是一个简写属性，由以下属性集合而成：

border-image-source

border-image: none | url("/images/border.png")

指定边框图片的地址。 none 表示border-image不做任何效果，边框使用 border-style 指定的样式。

border-image-slice

bordre-image-slice [<number> | <percentage>]{1,4} && fill?

指定4个值(4条分割线：top, right, bottom, left)将 border-image-source 分割成9宫格，如下：

CSS学习笔记：border-image

border-image-slice 四条线的值类型为：number | percentage。

  • number：不带单位的数值。1 代表 1个图片像素。
  • percentage：百分比
/* border-image-slice: horizontal vertical */
border-image-slice: 10% 30%;

/* border-image-slice: top horizontal bottom */
border-image-slice: 30 30% 45;

/* border-image-slice: top right bottom left */
border-image-slice: 7 12 14 5;
  • 关键字：fill
    按照上面的四个值切除之后，图片中间部分默认情况下是为空的。如果需要中间部分按照图片原本中间部分填充的话，需要在第4个值后面再加上fill值。

CSS学习笔记：border-image

border-image-width

border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4}

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

border-image-width 参数的四种类型:

  • length 带 px, em, in … 单位的尺寸值
  • percentage 百分比
  • number 不带单位的数字；它表示 border-width 的倍数
  • auto

border-image-width的缺省值是 number 类型：1

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-outset

border-image-outset: [ <length> | <number> ]{1,4}

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;

每个值分别指定超出对应边的数值。

CSS学习笔记：border-image

border-image-repeat

border-image-repeat: [ stretch | repeat | round ]{1,2}

定义图片如何填充边框。

  • 单个值，设置所有的边框；

  • 两个值，分别设置水平与垂直的边框。

  • stretch
    拉伸图片以填充边框。

  • repeat
    平铺图片以填充边框。
  • round
    类似于repeat，不过是整数次平铺。

CSS学习笔记：border-image

repeat 与 round 的区别：round 除了能平铺外还能通过伸缩使背景完整显示。

border-image

border-image是以上所有属性合在一起的简写属性。

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

有几点需要注意：

  • border-image-outset 参数一定要在 border-image-width 之后，假设border-image-width缺省，仍然需要在原来 border-image-width 写上 /
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / / 10px;
  • 如果有 border-image-width/ border-image-outset 属性值，border-image-slice必须指定数值，否则不合语法

border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / 10px / 10px;

参考资料： https://aotu.io/notes/2016/11/02/border-image/

在这里http://border-image.com/ 可以实时预览border-image各项属性的效果
标签：

相关文章