一、边框的基本属性
其主要包括三个类型值:
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时,需要特别注意阴影的顺序,最先写的阴影将显示在最顶层。
扫码二维码关注我们
领取专属 10元无门槛券
私享最新 技术干货