为啥背景颜色与框阴影重叠?

Posted

技术标签:

【中文标题】为啥背景颜色与框阴影重叠?【英文标题】:Why background-color overlap the box-shadow?为什么背景颜色与框阴影重叠? 【发布时间】:2017-05-17 07:17:20 【问题描述】:

我有一个包含background-color 的单元格的表格。我正在尝试为thead 设置box-shadow,但第一列中单元格的背景与阴影重叠。我尝试设置不同的z-index 值和position: relative,但无济于事。

.results-table 
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;


.results-table th,
.results-table td 
    padding: 1em;
    width: 96px;
    border-left: 1px solid rgba(34, 36, 38, 0.1);
    border-top: 1px solid rgba(34, 36, 38, 0.1);


.results-table thead 
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  position: relative;


.results-table thead th 
    background: #E0E0E0;
    border-bottom: 1px solid rgba(34, 36, 38, 0.1);


.results-table tr:first-child td,
.results-table tr:first-child th 
    border-top: none;


.results-table tr th:first-child,
.results-table tr td:first-child 
    border-left: none;


.item-cell.item-cell 
    width: 128px;


td.item-cell.item-cell 
    background: lightgreen;
<table class="results-table">
  <thead>
    <tr>
      <th class="item-cell">
        Item
      </th>
      <th>
        Package
      </th>
      <th>
        Price
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item-cell">
        <a href="#">Link 1</a>
      </td>
      <td>Package 1</td>
      <td>Price 1</td>
    </tr>
    <tr>
      <td class="item-cell">
        <a href="#">Link 2</a>
      </td>
      <td>Package 2</td>
      <td>Price 2</td>
    </tr>
    <tr>
      <td class="item-cell">
        <a href="#">Link 3</a>
      </td>
      <td>Package 3</td>
      <td>Price 3</td>
    </tr>
  </tbody>
</table>

顺便说一句,阴影在 Firefox 中有效,但在其他浏览器中无效。

Firefox [image]

Chrome, Opera, Edge, IE11 [image]

那么如何为thead实现阴影呢?

谢谢。

【问题讨论】:

【参考方案1】:

td上添加z-indexnegative

.results-table td
    position: relative;
    z-index: -1;

【讨论】:

【参考方案2】:

你可以改变这个:

box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);

到这里:

box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);

【讨论】:

【参考方案3】:

支持答案#2。但是这个老问题有新的解决方案,即clip-path

body 
  background: #f7f7f7;

.container 
  width: 500px;


.item 
  background: #fff;
  height: 50px;
  box-shadow: inset 0 1px #000;
/*  Solution # 1 Starts */
/*   z-index: -1;
  position:relative */
/*  Solution # 1 Ends */
/*  Solution # 2 Starts */
  clip-path: inset(0 1px 1px);
/*  Solution # 2 End */


.cell 
  box-shadow: inset 0 -1px #000;
/*   box-shadow: 0 1px #000; */
<div class="container">
  <div class="cell">
    <div class="item">ITEM 1</div>
    <div class="item">ITEM 2</div>
    <div class="item">ITEM 3</div>
  </div>
</div>

【讨论】:

以上是关于为啥背景颜色与框阴影重叠?的主要内容,如果未能解决你的问题,请参考以下文章

如何将所有 JButton 的默认鼠标按下背景颜色覆盖为其当前背景颜色的较暗阴影?

fullcalendar 使重叠背景事件的颜色与非重叠背景事件相同

UILabel设置背景色/阴影/描边

UIButton 背景颜色与突出显示的文本重叠

java 以编程方式创建阴影效果背景颜色。

CardView 背景设置使用 cardBackgroundColor 覆盖阴影