跳到主要内容位置

CSS 设置渐变阴影

这期视频分享一个 CSS 小技巧,设置渐变阴影。大体思路是:

  • 给要设置渐变阴影的元素,创建一个 before 伪元素。
  • before 伪元素的背景色设置为渐变色。
  • 使用 filter 属性对 before 伪元素进行模糊处理。

我们来看一下具体怎么实现。

定义 HTML

我们这里的 HTML 代码很简单,有一个 main 元素,包含一个需要添加渐变阴影的 div 盒子,把它的 class 设置为 box,方便后面设置样式:

<main>
<div class="box"></div>
</main>

整体样式

对于整体的样式,这里就不详细介绍了,就是把背景设置为了灰黑色,然后把 div 盒子放到了屏幕中央:

body {
background: hsl(0deg, 0%, 8%);
}

main {
width: 100vw;
height: 100vh;
max-width: 100%;
display: grid;
place-items: center;
}

设置盒子样式

我们先把这个 div 端样式设置一下:

  • 宽度 350px
  • 高度 500px
  • 背景色为紫色。
  • 圆角 8px。
  • 相对定位。
.box {
width: 350px;
height: 500px;
background: hsl(280deg, 100%, 50%);
border-radius: 8px;
position: relative;
}

设置渐变阴影

接下来设置 box 的渐变阴影,使用.box::before 创建一个伪元素:

  • 内容设置为空,这样伪元素才能显示出来。
  • 再设置为绝对定位, 设置 top 为 0、left 为 0 放到左上角,宽度设置为 100%、高度为 100%,这样这个伪元素就和.box 一样大小了,因为 .box 设置了相对定位,这个伪元素的绝对定位就会在 .box 内部布局。
  • 之后给它设置渐变的背景色,这里设置了 3 个颜色,以及 45 度倾斜。
  • 后面设置圆角也是 8 px。
  • 下面是重点,添加一个 filter 属性,使用 blur 函数对 before 伪元素进行模糊处理,模糊半径为 24px。
  • 这个时候 before 伪元素是盖在.box 的上面的,我们再把它的 z-index 设置为 -1,放到底下。
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
45deg,
hsl(300deg, 100%, 50%),
hsl(200deg, 100%, 50%),
hsl(100deg, 100%, 50%)
);
border-radius: 8px;
filter: blur(24px);
z-index: -1;
}

这样,就完成了渐变阴影的展示,为了让阴影展示的更好看一些,我们可以把 box 的背景色设置成和 body 的背景色一样:

.box {
background: hsl(0deg, 0%, 8%);
}

这样,.box 就像是一块带阴影的区域,可以在里边写点文字或者放点图片。

小结

好了,这就是使用 CSS 设置渐变阴影的过程,你学会了吗?如果有帮助请三连,想学更多有用的前端开发知识,请关注峰华前端工程师,感谢观看!

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买