盒子阴影 – box-shadow
box-shadow属性可以设置一个或者多个阴影。每个阴影用表示,多个阴影之间用逗号,隔开,从前到后叠加。
<shadow>的常见格式如下
- 第1个:offset-x, 水平方向的偏移,正数往右偏移
- 第2个:offset-y, 垂直方向的偏移,正数往下偏移
- 第3个:blur-radius, 模糊半径
- 第4个:spread-radius, 延伸半径
- :阴影的颜色,如果没有设置,就跟随color属性的颜色
- inset:外框阴影变成内框阴影
我们可以通过一个网站测试盒子的阴影:html-css-js.com/css/generat…
文字阴影 - text-shadow
text-shadow用法类似于box-shadow,用于给文字添加阴影效果。
<shadow>的常见格式如下:
相当于box-shadow, 它没有spread-radius的值。
我们可以通过一个网站测试文字的阴影:html-css-js.com/css/generat…