css 为什么背景色打破/删除框阴影？

gwo2fgha 于 2023-02-20 发布在其他

关注(0)|答案(3)|浏览(139)

我有一个非常简单的div结构-树框与中间框突出显示与box-shadow：

.offerBox {
  width: 300px;
  margin: 10px;
}

.obOffer {
  width: 33%;
  float: left;
  height: 100px;
  text-align: center;
}

.obOfferPrice {
  padding: 10px;
  color: white;
  background-color: #85AADD;
}

.obHiLight {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

<div class="offerBox">
  <div class="obOffer">
    <div class="obOfferTitle">Free</div>
    <div class="obOfferPrice">Free</div>
  </div>
  <div class="obOffer obHiLight">
    <div class="obOfferTitle">Title</div>
    <div class="obOfferPrice">$10</div>
  </div>
  <div class="obOffer">
    <div class="obOfferTitle">Title 2</div>
    <div class="obOfferPrice">$10</div>
  </div>
</div>

这些框中的一个元素有一个background-color属性集，由于某些原因，这个background-color只从右边移除了框阴影。
你知道为什么和怎么修吗？
问题的真实示例：http://jsfiddle.net/SqvUd/

css

来源：https://stackoverflow.com/questions/10587814/css-why-background-color-breaks-removes-the-box-shadow

3条答案

按热度按时间

balp4ylt1#

您只需将z-index和position:relative;相加
参见示例：

.offerBox { 
  border-radius: 6px; 
  width: 300px; 
  margin: 10px; 
}

.obOffer {
  position: relative; // 👈 this
  width: 33%; 
  float: left;
  height: 100px; 
  text-align: center; 
  z-index: 0;
}

.obOfferPrice {
  padding: 10px;   
  color: white;
  background-color: #85AADD; 
}

.obHiLight {
  z-index: 10;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

<div class="offerBox">
  <div class="obOffer">
    <div class="obOfferTitle">Free</div>    
    <div class="obOfferPrice">Free</div>    
  </div>
  <div class="obOffer obHiLight">
    <div class="obOfferTitle">Title</div>    
    <div class="obOfferPrice">$10</div>    
  </div>
  <div class="obOffer">
    <div class="obOfferTitle">Title 2</div>    
    <div class="obOfferPrice">$10</div>    
  </div>
</div>

赞(0）回复(0）举报 2023-02-20

eufgjt7s2#

它与项目的z索引有关。尝试将此添加到现有的css中：

.obOffer {
    position: relative;
    z-index: 10;
}

.obHiLight {
    position:relative;
    z-index: 100;
}

赞(0）回复(0）举报 2023-02-20

zz2j4svz3#

添加.obHiLight{opacity:0.999}会为该元素创建一个新的堆叠上下文，这会使它显示在其他元素的上方。这可能也适用于表格（未测试：）。@ItJustWerks @brian-tacker

赞(0）回复(0）举报 2023-02-20

我来回答

css 为什么背景色打破/删除框阴影？

3条答案

相关问题

热门标签

最新问答