盒子阴影 – box-shadow

156 阅读1分钟

盒子阴影 – box-shadow

box-shadow属性可以设置一个或者多个阴影。每个阴影用表示,多个阴影之间用逗号,隔开,从前到后叠加。

<shadow>的常见格式如下

image.png

  • 第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>的常见格式如下:

image.png

相当于box-shadow, 它没有spread-radius的值。

我们可以通过一个网站测试文字的阴影:html-css-js.com/css/generat…