CSS3边框相关属性

CSS3标准发布之前,对边框的样式的设定是非常单调的。CSS3标准发布之后,我们可以使用图片来定制边框,可以设置元素的阴影以及选择使用哪种盒子模型等。

border-image

border-image属性可以用图片作为边框样式。border-image属性可以拆分为5个属性:

1
2
3
4
5
border-image-source  // 边框图片源
border-image-slice // 边框图片切割尺寸
border-image-width // 边框图片宽度
border-image-outset // 边框图片区域超出元素边框的尺寸
border-image-repeat // 边框图片中间部分在元素对应部分的存在方式

border-image-source

设置边框图片的源,用url()方式规定图片路径,相对和绝对路径都可。语法如下:

1
border-image-source : none | <url>

border-image-slice

border-image-slice用来规定图片的切割位置。语法如下:

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

属性值可以为number,也可以是percentage。如果是percentage方式,则是相对于图片的尺寸。比如有如下一个边框图片:

ef7e418ec860a6a9a6ce9dbf8a058434.png

每一个小方块的尺寸是27px,那么此图片的长宽尺寸是(27*3)像素。使用如下代码进行切割:

1
border-image-slice:27px 27px 27px 27px;

结果如下图所示:

34a58685d3967e3afe7634c8cd1fd754.gif

图片被切割后,会被划分为九个区域,这个九个区域会与元素的九个区域是一一对应的。

border-image-width

border-image-width用来规定边框图片宽度,语法如下:

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

此属性可以省略,此时边框图片区域与元素的border宽度是一致的。此属性可以有1-4值,取值方式和border-width类似,同时也遵循上右下左方式。

border-image-outset

border-image-outset此属性用来规定边框图片区域超出元素边框的尺寸,语法如下:

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

border-image-repeat

border-image-repeat用来规定,切割后的边框图片中间部分(演示图片中的黄色部分)在元素对应部分的存在方式。语法如下:

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

三种值的含义如下:

  • stretch:图片以延展方式来填充该区域。
  • repeat:图片以重复平铺方式来填充该区域。
  • round:图片以重复平铺方式来填充该区域。如果没有以整数的倍数来填充该区域,图片会进行缩放以便于整数性倍数的平铺填充。

一般都是采用round

具体实例

示例1:

以上代码中,border-image-slice设置为27,由于没有规定border-image-width,那么将以边框的尺寸为标准,又由于没有规定border-image-repeat属性,则默认采用stretch方式,也就是拉伸被切割的中间区域(也即是演示图中的黄色区域)。

示例2:

边框设置为54px,边框图片将会自适应。

示例3:

round方式可以自动调整切割后边框图片中间部分(演示图黄色部分)尺寸方式实现重复平铺效果,所以不会出现repeat那样的残缺现象。

box-shadow

box-shadow用来设置元素的投影效果。语法如下:

1
box-shadow:h-shadow v-shadow blur spread color inset;

每个参数的具体意义:

  • h-shadow:必需,设置元素阴影水平偏移量,可以为负值,单位是像素。
  • v-shadow:必需,设置元素阴影垂直偏移量,可以为负值,单位是像素。
  • blur:可选,阴影模糊半径,只能够为正值,如果为0,表示不具有模糊效果,单位像素。
  • spread:可选,阴影的扩展半径尺寸,可以为负值,单位是像素。
  • color:可选,设置阴影的颜色;省略此参数,浏览器选取默认颜色,各个浏览器的默认可能不同,有的为透明。
  • inset:可选,可以将外部阴影改为内部阴影。

具体实例

示例1,只设置水平和垂直的偏移量:

示例2,新增模糊半径和阴影颜色:

示例3,设置多个阴影:

box-sizing

box-sizing属性用于指定元素采用哪种盒子模型。语法如下:

1
box-sizing :content-box || border-box || inherit

如果属性值是content-box,那么将采用标准盒模型;如果属性值是border-box,那么将采用怪异模式盒模型;如果属性值是inherit,那么将采用继承方式。

盒子模型目前安装W3C的标准可以分为两种:标准盒子模型和怪异盒子模型。

  • 标准盒子模型,最常见的盒子模型,在这种盒子模型下,元素实际占宽为:width+padding+border+margin;实际占高为:height+padding+border+margin。
  • 怪异盒子模型,实际占宽:width+margin;实际占高:height+margin。其中width和height包含content,padding,border。

标准盒子模型下元素的width和height构成了元素的内容区域,而这个区域对应着怪异盒子模型下content。

具体实例

以上代码中,有一个box容器和两个子div,由于精确设定了左右两个子div的宽度,恰好和box容器宽度相同,且采用浮动,所以两个子div可以水平排列。

现在给浮动的两个元素添加padding属性值,观察结果:

由于默认采用标准盒子模型,给元素添加了padding属性后,元素实际占宽度改变了(比如宽度为width+padding+border+margin,因为增加了padding,所以总体的值变大了),并且大于父元素的宽度,所以导致了换行。我们可以采用怪异盒子模型来解决这个问题:

怪异盒子模型下,元素的width没有改变,所以实际占宽没变(width+margin)。而width在怪异盒子模型下的值为:content+padding+border,因为总体的值没变,border不变,padding变大,所以使得content变小。

参考自:http://www.softwhy.com/

请作者喝瓶肥宅水🥤

0