SS3实现文本和背景的阴影效果,你可以使用text-shadow和box-shadow属性。
使用text-shadow属性可以给文本添加阴影效果,语法如下:
text-shadow: h-shadow v-shadow blur color;
其中,h-shadow和v-shadow分别表示水平和垂直阴影位置的偏移量,blur表示模糊半径,color表示阴影的颜色。例如,要给文本添加黑色阴影,偏移量为1px,模糊半径为2px,则可以写成:
text-shadow: 1px 1px 2px black;
使用box-shadow属性可以给元素添加阴影效果,语法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
其中,h-shadow、v-shadow、blur、color与text-shadow属性一致,表示阴影的水平/垂直位置、模糊半径、颜色;spread表示扩散半径,用于放大或缩小阴影的范围;inset为可选值,表示内阴影或外阴影,不加此参数则默认为外阴影。例如,给元素添加黑色外阴影,偏移量为2px, 模糊半径为5px,扩散半径为3px,可以写成:
box-shadow: 2px 2px 5px 3px black;
需要注意的是,这些属性只在支持CSS3的浏览器上才能生效。