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

目录
打赏
0
0
0
0
58
分享
相关文章
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
150 79
精通 CSS 阴影效果:从基础到高级应用
本文详细介绍了CSS阴影效果的使用方法,包括`box-shadow`和`text-shadow`的基本语法、参数解释及进阶应用。通过多个示例展示了如何实现外阴影、内阴影、渐变阴影以及多重阴影效果,并结合实际场景如浮动按钮和卡片式设计,说明了阴影与背景的综合应用。此外,还提供了性能优化建议,帮助开发者在确保视觉效果的同时提升页面性能。最后,总结了CSS阴影的重要性及其对网页美观度和用户体验的提升作用。
475 6
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
867 60
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。
217 5
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
137 7
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
174 1
|
6月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
49 0
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
377 0
最新CSS3定位元素
【8月更文挑战第28天】
63 5
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
143 0
AI助理

你好,我是AI助理

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