【css】设置渐变阴影

周周爱喝粥呀2024-02-01 1:33

css的属性中没有直接设置渐变阴影的，但是可以通过伪元素去实现。

css 复制代码

.box-wrap{
  width: 100%;
  display: grid;
  place-content: center;
}
.box {
  width: 150px;
  height: 150px;
  background: #eee;
  border: 1px solid #585252;
  position: relative;
  transform: translate(0);/* 元素不进行位移，处于原始位置 */
  transform-style: preserve-3d;/* 进行3D变换时保留元素的z-index属性 */
}
.shadow::before {
  content: '';
  position: absolute;
  inset: -2px;/* 设置伪元素的内边距，使元素向内缩小2px*/
  transform: translate3d(4px,3px,-2px);/* 3D变换 (X, Y, Z) */
  filter: blur(10px);/* 设置模糊效果，模糊半径为10px */
}

html 复制代码

    <div class="box-wrap">
      <div class="box shadow"></div>
    </div>

关于filter属性的介绍，之前也有写过，可以看这篇 ~