【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 */
}
    <div class="box-wrap">
      <div class="box shadow"></div>
    </div>

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

相关推荐

  1. CSS3】渐变 阴影 遮罩

    2024-01-31 17:54:03       25 阅读
  2. css 设置div阴影样式

    2024-01-31 17:54:03       10 阅读
  3. CSS中背景设置——渐变色和放射渐变

    2024-01-31 17:54:03       28 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-31 17:54:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-31 17:54:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-31 17:54:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-31 17:54:03       18 阅读

热门阅读

  1. 32.GitHub基础学习

    2024-01-31 17:54:03       34 阅读
  2. Kotlin开发中有关时间的具体使用

    2024-01-31 17:54:03       33 阅读
  3. Golang中的方法链

    2024-01-31 17:54:03       28 阅读
  4. 本周黄金价格将面临重大风险事件

    2024-01-31 17:54:03       41 阅读
  5. LRU(Least Recently Used)

    2024-01-31 17:54:03       32 阅读
  6. MySQL 索引 create index 详解

    2024-01-31 17:54:03       40 阅读
  7. linux nodejs无法安装canvas模块

    2024-01-31 17:54:03       31 阅读
  8. c#常用的修饰符

    2024-01-31 17:54:03       35 阅读
  9. C代码,控制亮灯的代码

    2024-01-31 17:54:03       31 阅读
  10. 马可波罗API中的item_get方法详解

    2024-01-31 17:54:03       44 阅读