关于shadow属性

介绍几种shadow属性,比较box-shadow与drop-shadow

例子

左侧为box-shadow效果,右侧为drop-shadow效果。

See the Pen box-shadow&drop-shadow by yrq110 (@yrq110) on CodePen.

box-shadow

由于CSS使用的是盒模型,元素的边界是被束缚在一个矩形内的,因此就算元素的形状不是一个盒子,盒模型依然存在,那么box-shadow仍然应用在盒子的边框上。

语句

1
box-shadow: inset? <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?

参数

  • inset
    可选,默认不设置,使用inset后,阴影在边框内(即使是透明边框),背景之上内容之下
  • offset-x, offset-y
    必须,设置阴影的水平和垂直偏移量
  • blur-radius
    可选,默认为0,设置阴影的模糊半径,值越大越模糊
  • spread-radius
    可选,默认为0,设置阴影的扩展半径,值越大范围越大
  • color
    可选,设置阴影颜色

drop-shadow

drop-shadow是属于CSS Filter中的一种filter function,而filter不是绑定到盒模型上的,因此在上面的例子中,三角形的边界被有效的检测到并且周围透明的部分被忽略掉,在期望的形状上获得了阴影。

语句

1
filter: drop-shadow(<offset-x>, <offset-y>, blur-radius?, spread-radius?, color?)

参数

  • offset-x, offset-y
    必须,设置阴影的水平和垂直偏移量
  • blur-radius
    可选,默认为0,设置阴影的模糊半径,值越大越模糊
  • spread-radius
    可选,默认为0,设置阴影的扩展半径,值越大范围越大
  • color
    可选,设置阴影颜色

box-shadow vs drop-shadow

属性 box-shadow drop-shadow
Spec CSS Backgrounds and Borders Module Level 3 Filter Effects Module Level 1
浏览器支持 非常好
spread-radius 支持,可选的第四属性值 部分浏览器支持
blur-radius 根据像素长度计算 根据SVG filter的stdDeviation属性计算
inset 支持 不支持
性能 无硬件加速 支持浏览器内硬件加速

其他例子

See the Pen Drop-shadow vs box-shadow (2) by Kseso (@Kseso) on CodePen.

See the Pen box-shadow & drop-shadow by qnlz (@qnlz) on CodePen.

See the Pen Drop-shadow vs box-shadow (3) en png´s by Kseso (@Kseso) on CodePen.

text-shadow

text-shadow会给元素中的文本及其text-decoration属性添加阴影。

See the Pen vWpdRa by yrq110 (@yrq110) on CodePen.

参数

  • color
    可选,设置阴影颜色
  • offset-x, offset-y
    必须,设置阴影的水平和垂直偏移量
  • blur-radius
    可选,默认为0,设置阴影的模糊半径,值越大越模糊

参考

文章目录
  1. 1. 例子
  2. 2. box-shadow
    1. 2.1. 语句
    2. 2.2. 参数
  3. 3. drop-shadow
    1. 3.1. 语句
    2. 3.2. 参数
  4. 4. box-shadow vs drop-shadow
    1. 4.1. 其他例子
  5. 5. text-shadow
    1. 5.1. 参数
  6. 6. 参考
|