CSS3之边框

一、边框的基本属性

其主要包括三个类型值：

border-width：设置元素边框的粗细；

border-color：设置元素边框的颜色；

border-style：设置元素边框的类型。

缩写语法：缩写后的每个属性值之间使用空格隔开，且不分先后顺序。

二、盒子阴影属性

box-shadow用来定义元素的盒子阴影。

语法规则：

box-shadow属性可以使用一个或多个投影，如果使用多个投影必须使用逗号隔开。

参数说明：

none：默认值，元素没有任何阴影效果

inset：设置元素内阴影，如果不设置，默认是外阴影

x-offset：阴影水平偏移量，可以是正负值。取正值，阴影在元素的右边；取负值，阴影在元素的左边。

y-offset：阴影垂直偏移量，可以是正负值。取正值，阴影在元素底部；取负值，阴影在元素顶部。

blur-radius：阴影模糊半径，只能是正值，值越大，阴影的边缘越模糊；如果取值为0，表示不具有模糊效果。

spread-radius：阴影扩展半径，可以是正负值，取正值，整个阴影都延展扩大；取负值，整个阴影都缩小。

color：阴影颜色

示例1：单边阴影

示例2：四边相同阴影效果

box-shadow不会影响页面的任何布局。

示例3：内阴影

box-shadow的inset内阴影直接运用在img上是没有任何效果的，可以将box-shadow的内阴影使用在div标签上。

border-radius运用在img上时，Webkit内核浏览器也无效果，最后在img外添加一个容器标签，并将img转换成外容器的背景图片，将border-radius运用在外容器上才有圆角效果。

示例4：多层阴影

在使用多层级box-shadow时，需要特别注意阴影的顺序，最先写的阴影将显示在最顶层。

扫码二维码关注我们