CSS学习笔记:border-image

2017-01-02 08:29:12来源:CSDN作者:crystal6918人点击

第七城市

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宫格,如下:

这里写图片描述

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值。

这里写图片描述

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;

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

这里写图片描述

border-image-repeat

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

定义图片如何填充边框。

  • 单个值,设置所有的边框;
  • 两个值,分别设置水平与垂直的边框。

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

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

这里写图片描述

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各项属性的效果

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台