CSS 实现不规则元素的阴影

原创于 2023-02-17 09:49:53 发布 · 967 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

Html / CSS 专栏收录该内容

20 篇文章

订阅专栏

文章介绍了在CSS中，当面临为不规则元素添加阴影的挑战时，可以使用filter属性的drop-shadow功能来实现。常规的box-shadow属性无法适用于所有情况，但通过创建伪元素并结合drop-shadow滤镜，可以为复杂形状的元素添加阴影效果。

大伙在工作中，尤其写页面样式，相信很多地方用到 box-shadow 阴影属性，但是这个属性只能用到规则的元素上，亦或者说只能用到一个元素上，那当我们遇到不规则的元素时，想加阴影就比较棘手了，但是，CSS 提供了此问题的解决方案，今天，我们具体介绍下：

在这里插入图片描述
我们如果想实现这个图形，第一想到的，就是先绘制一个方块，然后用伪元素或者子元素绘制小方块，代码如下：

<div class="box">我是一个不规则的盒子</div>

.box {
   width: 200px;
   height: 200px;
   background-color: deeppink;
   border-radius: 20px;
   position: relative;
   margin: 200px 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   font-size: 16px;
 }
 .box:before {
   content: '';
   position: absolute;
   left: 50%;
   top: -4.5px;
   transform: rotateZ(45deg) translate(-50%);
   width: 30px;
   height: 30px;
   border-radius: 2px;
   background-color: deeppink;
 }

这时候，如果我们想加阴影的话，通常做法先给盒子加阴影，再给子元素加阴影：

.box {
	box-shadow: 0 0 10px 2px yellow;
}
.box:before {
	box-shadow: 0 0 10px 2px yellow;
}

我们看下效果，发现没有实现我们想要的效果
在这里插入图片描述
！！！这个时候我们利用一个样式：filter(drop-shadow)：

.box {
	filter: drop-shadow(0 0 10px yellow);
}

在这里插入图片描述