css:box-shadow层级问题-相邻元素背景遮盖了阴影

简介: css:box-shadow层级问题-相邻元素背景遮盖了阴影

当box-background元素没有给背景颜色时,box-shadow的阴影可以正常显示

<style>
  .box {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .box-shadow {
    box-shadow: 0 5px 10px -5px #00ff00;
  }
  .box-background {
  }
</style>
<div class="box box-shadow">box-shadow</div>
<div class="box box-background">box-background</div>

当box-background元素给定一个背景色之后,box-shadow的阴影就没有了

<style>
.box {
   height: 100px;
   line-height: 100px;
   text-align: center;
 }
 .box-shadow {
   box-shadow: 0 5px 10px -5px #00ff00;
 }
 .box-background {
    /* 增加一个背景色 */
   background-color: #f5f5f5;
 }
</style>
<div class="box box-shadow">box-shadow</div>
<div class="box box-background">box-background</div>

第一时间想到的是给box-shadow加一个z-index属性,不过没有效果,最终解决是让box-shadow相对定位

<style>
      .box {
        height: 100px;
        line-height: 100px;
        text-align: center;
      }
      .box-shadow {
        box-shadow: 0 5px 10px -5px #00ff00;
        /* 增加一个定位 */
        position: relative;
      }
      .box-background {
        background-color: #f5f5f5;
      }
    </style>
    <div class="box box-shadow">box-shadow</div>
    <div class="box box-background">box-background</div>

参考

如何解决box-shadow被紧邻的元素遮住

目录
打赏
0
0
0
0
2
分享
相关文章
vue element plus DateTimePicker 日期时间选择器
vue element plus DateTimePicker 日期时间选择器
367 0
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
764 4
|
10月前
|
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
595 2
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
230 1
Centos8使用yum报错 Couldn‘t resolve host name for http://mirrorlist.centos.org/?releas
Centos8使用yum报错 Couldn‘t resolve host name for http://mirrorlist.centos.org/?releas
2789 0
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
小程序封装拖拽菜单组件(uniapp拖拽排序,自定义菜单)
movable-area 是 uniapp 的可移动区域组件。它用于定义可移动视图容器,在其内部可拖拽移动子视图。
937 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问