CSS插入框阴影表行? [英] css inset box-shadow for table row?

问题描述

看到我相关但又不同的问题:表行的css框阴影?

see my related yet different question: css box-shadow for table row?

这是我的HTML代码:

Here is my HTML code:

<style>
.yellow{
    background-color: yellow;
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: inset 1px 1px 5px 5px #d99292;
}
</style>
<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>

目标是在第一行中有一个嵌入式投影.问题在于单元格1的背景色遮盖了它.

The goal is to have a inset drop shadow in the first row. The problem is that the background color of cell 1 is obscuring it.

我的问题是:如何在单元格1的背景顶部显示插入的放映节目?

My question is: how do I make the inset drop show show on top of the background of cell 1?

推荐答案

您也可以尝试

You may also give a try to mix-blend-mode

mix-blend-mode CSS属性设置元素的内容应如何与元素的父元素的内容和元素的背景融合.

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

.yellow{
    background-color: yellow;
    mix-blend-mode:multiply
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: inset 1px 1px 5px 5px #d99292;
 /*optionnal :
    background:white ; 
  to avoid .yellow mixing eventually with body, or else background */
}

<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>

这篇关于CSS插入框阴影表行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！