css 设置盒子阴影，阴影和背景图保持一致

最新推荐文章于 2024-06-21 11:27:52 发布

随忆~

最新推荐文章于 2024-06-21 11:27:52 发布

阅读量1.3k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/suiyijiang/article/details/109869235

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

纯css 设置盒子阴影，阴影颜色跟图片保持一致

这个盒子阴影能根据不同的图片显示，跟图片保持一致

盒子阴影效果展示
css代码如下：

.content-item div {
  width: 260px;
  height: 260px;
  border-radius: 10px;
  background-size: contain;
  position: relative;
}

.content-item div::after {
  content: "";
  background: inherit;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(20px) brightness(80%);
  transition: all 300ms;
  z-index: -1;
}

.content-item div:hover::after {
  width: 280px;
  height: 280px;
}