CSS3之美(八):边框

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 相同的规则计算其余各边框的长度。

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

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

border-image-width

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

border-image-widthborder-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: 用于设置阴影的颜色

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