CSS3 为 border
带来了许多新的特性,这酷毙了。
边框圆角
CSS3 的背景与边框模块引入了一种新的方法,我们只要单独使用 CSS,就可以为元素添加圆角效果。其中,每个边角都会被当作是一个四分之一的椭圆,它通过在 x 轴和 y 轴上的两个点之间绘制一条曲线进行定义。
四分之一的椭圆可以是规则的,即两条轴线上的长度都是相同的;也可以是不规则的,即每条轴线的长度均不相等。
CSS3 使用 border-radius
属性去定义这些曲线。
|
|
上述示例中的 v 是一个值为 top
或者 bottom
的关键字值,h 是一个值为 left
或者 right
的关键字值,而 x 和 y 则分别表示椭圆的水平半径和垂直半径。
下面是一个示例:
|
|
上面的代码会使用 5px 的水平半径和 8px 的垂直半径在一个 div 元素的右下角绘制椭圆曲线,使其变成圆角。
对于规则曲线来说,border-radius
可以简化,只需留下 x 或 y 值即可。如果其中的一个值未被指定,那么这两个值就会被假定是相等的。所以如果是要在元素的每个边角上应用同样的半径,可以这样:
|
|
border-radius简写
上面的写法针对元素的 4个角需要分别编写 4行代码稍显复杂,我们可以使用简写属性 border-radius
。
border-radius
属性和 border-width
margin
padding
一样,也可以指定 1个、2个、3个或者 4个值,其规则也是大同小异。注意,如果使用这种简写方式,那么 x 和 y 值必须是相同的。
下面是示例;
|
|
另外,我们也可以对不规则曲线使用简写语法。下面是语法规则:
上述语法格式中,斜线的两端均可以包含一至四个值,如同规则曲线的简写一样。下面是示例:
|
|
边框图片
CSS3 引入了 border-iamge
属性,使得我们可以使用自定义图片作为边框。其语法如下:
border-image
是一个简写属性,它总共有 5个独立属性:
border-iamge-source
这个属性比较好理解,就是用来设定作为边框背景图像的来源。但要注意的是,我们最好选取中间区域透明或者为白色的图片,要不然,图片看起来就好像是元素的背景图了。
border-image-slice
这个属性是用来设置边框背景图的分割方式,其语法如下:
|
|
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个值相同,可以合并成一个。语法如下:
|
|
其中,关键字可取以下值:
stretch
: 拉伸方式填充,表示侧面的切片将会延伸,从而填充元素的长(高或者宽)repeat
: 沿着边框的长平铺图片,图片碰到边界时,超出会被截断round
: 沿着边框的长整数次平铺图片,图片会根据边框尺寸动态调整其大小
直至正好可以铺满整个边框space
: 沿着边框的长整数次平铺图片,图片会根据边框的尺寸动态调整其间距
直至正好可以铺满整个边框
边框阴影
CSS3 新引入的 box-shadow
属性可以为块状元素添加阴影。其语法如下:
|
|
下面详细解释每个参数的意义:
inset
: 可选的关键字值,用于设置对象的阴影类型为内阴影,如果不设置该值,则阴影默认为外部阴影- horizontal: 用于设置阴影相对于元素的的水平偏移距离(以元素左上角为参考原点),必须参数,可以为负值
- vertical: 用于设置阴影相对于元素的垂直偏移距离(以元素左上角为参考原点),必须参数,可以为负值
- blur: 用于设置阴影的模糊程度,它是一个长度值,不允许负值
- spread: 表示阴影的外延长度,可以为负值
- color: 用于设置阴影的颜色
注意;以上这些值中,只有水平和垂直偏移值是产生阴影效果必须的,另外,最好显式地指出阴影颜色。