【css】设置渐变阴影

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属性的介绍,之前也有写过,可以看这篇 ~

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜7 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui