为啥背景颜色与框阴影重叠?
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-index
negative
.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 的默认鼠标按下背景颜色覆盖为其当前背景颜色的较暗阴影?