CSS3之美（八）：边框

发表于 | 更新于 | 分类于 |
字数统计 1,904 | 阅读时长 7

CSS3 为 border 带来了许多新的特性，这酷毙了。

边框圆角

CSS3 的背景与边框模块引入了一种新的方法，我们只要单独使用 CSS，就可以为元素添加圆角效果。其中，每个边角都会被当作是一个四分之一的椭圆，它通过在 x 轴和 y 轴上的两个点之间绘制一条曲线进行定义。

四分之一的椭圆可以是规则的，即两条轴线上的长度都是相同的；也可以是不规则的，即每条轴线的长度均不相等。

CSS3 使用 border-radius 属性去定义这些曲线。

1
E { border-v-h-radius: x y; }

上述示例中的 v 是一个值为 top 或者 bottom 的关键字值，h 是一个值为 left 或者 right 的关键字值，而 x 和 y 则分别表示椭圆的水平半径和垂直半径。

下面是一个示例：

1
2
3
div {
	border-bottom-right-radius: 5px 8px;
}

上面的代码会使用 5px 的水平半径和 8px 的垂直半径在一个 div 元素的右下角绘制椭圆曲线，使其变成圆角。

对于规则曲线来说，border-radius 可以简化，只需留下 x 或 y 值即可。如果其中的一个值未被指定，那么这两个值就会被假定是相等的。所以如果是要在元素的每个边角上应用同样的半径，可以这样：

1
2
3
4
5
6
div {
	border-top-left-radius: x;
	border-top-right-radius: x;
	border-bottom-left-radius: x;
	border-bottom-right-radius: x;
}

border-radius简写

上面的写法针对元素的 4个角需要分别编写 4行代码稍显复杂，我们可以使用简写属性 border-radius。

border-radius 属性和 border-width margin padding 一样，也可以指定 1个、2个、3个或者 4个值，其规则也是大同小异。注意，如果使用这种简写方式，那么 x 和 y 值必须是相同的。

下面是示例；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.radius-1 {
	border-radius: 3px;		/* 边框的四个角均为半径为 3px 的弧线 */
}
.radius-2 {
	border-radius: 3px 2px;
	/* 边框的左上角、右下角是半径为 3px 的弧线，右上角、左下角是半径为 2px 的弧线 */
}
.radius-3 {
	border-radius: 3px 2px 1px;
	/*
	 * 边框的左上角为半径为 3px 的弧线
	 * 边框的右上角与左下角为半径为 2px 的弧线
	 * 边框的右下角为半径为 1px 的弧线
	 */
}
.radius-4 {
	border-radius: 3px 2px 0 0;
	/*
	 * 左上角 半径为 3px 的弧线
	 * 右上角 半径为 2px 的弧线
	 * 右下角、左下角 没有圆角效果
	 */
}

另外，我们也可以对不规则曲线使用简写语法。下面是语法规则：

1
2
E { border-radius: horizontal-radius / vertical-radius; }
/* horizontal-radius 为水平半径，vertical-radius 为垂直半径 */

上述语法格式中，斜线的两端均可以包含一至四个值，如同规则曲线的简写一样。下面是示例：

1
2
3
4
5
6
7
8
9
10
.radius-1 {
	border-radius: 10px 20px 20px / 20px 10px;
}
/*
 * 左上角 水平半径为 10px，垂直半径为 20px
 * 右上角 水平半径为 20px，垂直半径为 10px
 * 右下角 水平半径为 20px，垂直半径为 20px
 * 左下角 水平半径为 20px，垂直半径为 10px
 */

边框图片

CSS3 引入了 border-iamge 属性，使得我们可以使用自定义图片作为边框。其语法如下：

1
E { border-image: source slice width outset repeat; }

border-image 是一个简写属性，它总共有 5个独立属性：

border-iamge-source

这个属性比较好理解，就是用来设定作为边框背景图像的来源。但要注意的是，我们最好选取中间区域透明或者为白色的图片，要不然，图片看起来就好像是元素的背景图了。

border-image-slice

这个属性是用来设置边框背景图的分割方式，其语法如下：

1
E { border-image-slice: value; }

value 是一个长度值或百分比值（或者一系列值）。border-image-slice 属性与 border-radius 有些相似，其属性值参数可以在 1~4 个之间。

该属性指定了从上、右、下、左四个方位来切割图像，将图像分成 4个角，4条边和中间区域共 9份。其中，border-image-slice 的 4个属性值分别用于切片时控制要切割的区域（即中间区域，放置元素的区域）距顶部、右侧、底部、左侧的距离，这些值是指明了我们将要使用图片的那一部分作为上边框、右边框、下边框、左边框。

如果提供的属性值的数量少于 4个，则其按照与 border-width margin padding 相同的规则计算其余各边框的长度。

其中，中间区域是透明的（即没有图像填充），除非在属性值最后加上关键字 fill。fill 关键字指定保留裁剪后的中间区域，其铺排方式遵循 border-image-repeat 的设定。

border-image-slice 属性切割后的切片，几个角会一直保持不变，能够被缩放以填充它们的位置，但 4条边可以使用 border-image-repeat 属性中指定的值进行修改。

border-image-width

该属性用于设置元素边框的宽度，它的优先级高于 border-width。（border-image-width 常用于提供回退状态。）

border-image-width 和 border-image-slice 属性有着同样的语法。

border-image-outset

该属性用于设置元素的边框背景图可以在元素外部扩展的长度，其使用具体数值指定了边框背景图向外扩展的长度。

border-image-outset 属性也使用和 border-image-slice 一样的语法。

border-image-repeat

该属性用于设定边框背景图侧边切片的填充方式，可以定义 0~2 个参数值，分别表示水平方向和垂直方向的平铺方式，如果 2个值相同，可以合并成一个。语法如下：

1
E { border-image-repeat: keyword; }

其中，关键字可取以下值：

  • stretch： 拉伸方式填充，表示侧面的切片将会延伸，从而填充元素的长（高或者宽）
  • repeat： 沿着边框的长平铺图片，图片碰到边界时，超出会被截断
  • round： 沿着边框的长整数次平铺图片，图片会根据边框尺寸动态调整其 大小 直至正好可以铺满整个边框
  • space： 沿着边框的长整数次平铺图片，图片会根据边框的尺寸动态调整其 间距 直至正好可以铺满整个边框

边框阴影

CSS3 新引入的 box-shadow 属性可以为块状元素添加阴影。其语法如下：

1
E { box-shadow: inset horizontal vertical blur spread color; }

下面详细解释每个参数的意义:

  • inset: 可选的关键字值，用于设置对象的阴影类型为内阴影，如果不设置该值，则阴影默认为外部阴影
  • horizontal： 用于设置阴影相对于元素的的水平偏移距离（以元素左上角为参考原点），必须参数，可以为负值
  • vertical： 用于设置阴影相对于元素的垂直偏移距离（以元素左上角为参考原点），必须参数，可以为负值
  • blur： 用于设置阴影的模糊程度，它是一个长度值，不允许负值
  • spread： 表示阴影的外延长度，可以为负值
  • color： 用于设置阴影的颜色

注意；以上这些值中，只有水平和垂直偏移值是产生阴影效果必须的，另外，最好显式地指出阴影颜色。