如何在子元素的背景上呈现插入框阴影？答案

【问题标题】：How to render inset box-shadow over the child element's background?如何在子元素的背景上呈现插入框阴影？
【发布时间】：2021-11-05 16:38:06
【问题描述】：

运行下面的sn-p：

.container {
  display: flex;
}

.container1 {
  box-shadow: inset 0 0 30px red;
  width: min-content;
}

.container2 {
  position: relative;
  margin-left: 20px;
  width: min-content;
}

.container2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 30px red;
}

.inner {
  width: 200px;
  height: 100px;
  background: yellow;
}

.text {
  width: 200px;
  height: 100px;
}

<div class="container">

  <div class="container1">
    <div class="inner"></div>
    <div class="text">Some text</div>
  </div>
  
  <div class="container2">
    <div class="inner"></div>
    <div class="text">Some text</div>
  </div>
  
</div>

有没有办法将 container1 的红色框阴影的代码重写为高于黄色背景（或一般任何背景，包括图片）？

解决问题的一种方法是使用伪元素（因此，渲染的 container2 是它的预期方式），但我不是特别喜欢这个解决方案并希望有一种方法可以在不引入新的 dom 元素（仅利用 css）的情况下做同样的事情。

【问题讨论】：

伪元素不是 DOM 元素。您无法在 DOM 中找到它们。

标签： html css

【解决方案1】：

正如您提到的 container2 以显示预期结构，我从代码中删除了它。这是我在 position CSS 属性的帮助下完成这项任务的方法：

.container {
    display: flex;
  }
  
  .container1 {
    box-shadow: inset 0 0 30px red;
    width: 200px;
    height: 200px;
    position: relative;
  }
  
  
  .inner {
    width: 200px;
    height: 100px;
    background: yellow;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
  }
  
  .text {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 0;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">

    <div class="container1">
        <div class="inner"></div>
        <div class="text">Some text</div>
    </div>
    <!--
    <div class="container2">
        <div class="inner"></div>
        <div class="text">Some text</div>
    </div>
    -->
    </div>
</body>
</html>

不设置宽高：

如果您不想设置宽度和高度，可以在 .container1 元素上使用 display:flex，如下所示：

.container {
    display: flex;
  }
 
  .container1 {
    box-shadow: inset 0 0 30px red;
    width: 35%;
    display: flex;
    flex-direction: column;
  }
  
  
  .inner {
    background: yellow;
    width: 100%;
    z-index: -1;
  }

  .inner img {
    width: 100%;
  }
  
  .text {
  color: #1415FF;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">

    <div class="container1">
        <div class="inner">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque id temporibus cumque, magnam blanditiis voluptate vel nisi. Fugit itaque quod inventore, optio dolor magnam ipsa, temporibus rerum qui error deserunt?
            <!-- <img src="birthday.png" alt=""> -->
        </div>
        <div class="text">Some text some text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto quo assumenda veniam voluptatum beatae impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rerum ullam hic mollitia quia! impedit doloremque, libero quam placeat. Illo, totam. Deleniti nihil fugiat impedit, rer</div>
    </div>
    <!--
    <div class="container2">
        <div class="inner"></div>
        <div class="text">Some text</div>
    </div>
    -->
    </div>
</body>
</html>

我在.container1 中使用width: 35% 只是因为我们通常为元素设置相对宽度，但您可以将其删除。您也可以将 img 标签放在 .inner 类中，我认为这样可以正常工作。

【讨论】：

这是一个很好的答案，我将把它标记为对给定问题的正确答案。只有一个澄清：当.inner 和.text 的宽度和高度未知（因此，容器的尺寸也是未知的）时，有没有办法重写它。我在示例中设置了宽度和高度以简化它（因此，不添加任何内容），但在实际示例中，有一些内容（图片和文本）决定了容器的宽度和高度。
@olegzhermal 如果我正确理解了您的目标，我在答案中添加了一些代码，使用display:flex 而不是“位置”属性。