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>

image.png

当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>

image.png

第一时间想到的是给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>

image.png

相关文章
|
18天前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
54 1
|
5天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
10 0
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
20天前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
48 0
|
3月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
27 5
|
3月前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
3月前
|
前端开发
CSS动画新技巧:打造阴影上下抖动的视觉效果!
CSS动画新技巧:打造阴影上下抖动的视觉效果!
|
3月前
|
前端开发
CSS - 使用 clip-path 轻松实现正六边形块状元素
如何使用CSS的`clip-path`属性来创建正六边形的块状元素。文章提供了详细的HTML和CSS代码示例,展示了如何实现六边形的布局和样式,并通过CSS动画增强了视觉效果。最终效果是一个包含文本的可交互的正六边形元素,当鼠标悬停时会改变颜色。
130 0
CSS - 使用 clip-path 轻松实现正六边形块状元素
|
3月前
|
存储 前端开发
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
68 0
|
3月前
|
前端开发
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!