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 */
}
<div class="box-wrap"><div class="box shadow"></div></div>
关于filter属性的介绍,之前也有写过,可以看这篇 ~