王鹏飞

Blog

Tutorial

About

CSS

2021年8月20日

阴影

css提供了多种方式可以为元素或者文字添加不同的阴影效果。通过本节内容,你将学会如何使用这些方式,知道它们各自的用途。

一.box-shadow

box-shadow是比较常用的一个属性,可以为元素边框周围添加一层阴影效果。

.ele {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow接受的值,按照从左至右的顺序依次表示:

  1. x偏移:水平偏移,正值表示向右偏移,负值表示向左偏移。
  2. y偏移:竖直偏移,正值表示向下偏移,负值表示向上偏移。
  3. 模糊半径:表示阴影的模糊范围。
  4. 扩散半径(可选):正值会增加阴影的半径,负值会减少阴影的半径,设置为0时,阴影半径为模糊半径。
  5. 颜色:设置阴影的颜色,如果没有显示设置该值,那么会使用text的颜色作为阴影颜色。

还可以在box-shadow值最开始处添加inset关键字,使阴影呈现在边框内部。

可以添加多个阴影,形成叠加效果。

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

二.text-shadow

使用text-shadow可以给文字添加阴影效果。与box-shadow类似,但是作用对象是文字。

.ele {
    text-shadow: 3px 3px 3px hotpink;
}

text-shadow接受的值与box-shadow一样。唯一不同的是,text-shadow不能设置扩散半径和inset关键字。

box-shadow一样,也可以给文字添加多个阴影。

.ele {
    text-shadow: 1px 1px 0px white,2px 2px 0px firebrick;
}

三.drop-shadow

drop-shadow是一个css函数,而不是属性。用于给图片中的内容添加阴影的,对的你没有看错的确是图片里的内容。实现过程实际上是分析图片中的内容,然后在图片原有的位置上添加一个模糊的偏移的图片,达到阴影的效果。与filter属性配合使用。

.ele {
    filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

drop-shadow参数与box-shadow一样,但是不能设置扩散半径和inset关键字,你也可以为图片添加多个阴影。

.ele {
    filter: drop-shadow(0px 0px 10px hotpink) drop-shadow(10px 10px 20px rgba(0 0 0 / 30%))
}

附:参考资料

(完)

留言(0


发表评论

邮箱地址不会被公开。*表示必填项