CSS3 border 属性详解

CSS3中border属性有几个非常重要的子属性，本文来逐步说明。

border-image

CSS3中可以通过border-image来设置边框的背景图片，同时还有几个相关的子属性来配合使用。

属性列表：

  • border-image-source:用在边框的图片路径

  • border-image-slice:图片边框向内偏移量

  • border-image-width:图片边框的宽度

  • border-image-outset:图片边框区域超出边框的量

  • border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

这些属性可以简写在border-image中，实例如下：

1
2
3
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round;/* Ghrome and Safari */
-o-border-image:url(border.png) 30 30 round /* Opear */

border-radius

border-radius用于给元素添加圆角边框。border-radius有四个分属性，分别是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius，按照顺时针顺序，从左上角、右上角、右下角、左下角。

常见写法：

1
border-radius: 25px;

解释：这种写法，是指四个角的圆弧水平和垂直半径都是25px，也就是说这个角是1/4个圆弧。
等价于这种写法：

1
2
3
4
border-top-left-radius:25px 25px;
border-top-right-radius:25px 25px;
border-bottom-right-radius:25px 25px;
border-bottom-left-radius:25px 25px;

border-radius:left right;

如果right的值为空，则跟left值一样。

border-radius还有一种写法是以#’/‘来区分，前面是四个角的水平半径，后面是四个角的垂直半径

1
border-radius: 25px 25px 10px 20px / 25px 25px 10px 20px;

此种写法等价于：

1
2
3
4
border-top-left-radius:25px 25px;
border-top-right-radius:25px 25px;
border-bottom-right-radius:10px 10px;
border-bottom-left-radius:20px 20px;

如果border-radius采用水平半径和垂直半径分开的写法：

  • 只写了两个值：则top-left和bottom-right共用前一个值，top-right和bottom-left共用后一个值

  • 只写了三个值：则top-left和bottom-right分别采用第一个和最后一个值，中间的值由top-right和bottom-left共用

  • 只写了一个值：则四个角共用 一个值

  • 写了四个值，则四个角按照top-left、top-right、bottom-right、bottom-left的顺序取值

box-shadow

box-shadow用来向边框添加一个或多个阴影。

语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;

注释 : box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

解释：

  • h-shadow: 必需。水平阴影的位置，允许负值。

  • v-shadow: 必需。垂直阴影的位置，允许负值。

  • blur: 可选。模糊距离。

  • spread: 可选。阴影的尺寸。

  • color: 可选。阴影的颜色。

  • inset: 可选。将外部阴影(outset)改为内部阴影。

常见写法：

1
box-shadow:10px 10px 10px #aaaaaa;