如何在透明元素内制作盒子阴影答案

【问题标题】：How to make box-shadow inside transparent element如何在透明元素内制作盒子阴影
【发布时间】：2020-08-08 02:03:54
【问题描述】：

当元素透明时，阴影不在该元素内部。看这个例子：

box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);

https://jsfiddle.net/yrqvdbux/6/

html, body {
  width:100%;height:100%; margin:0;
}

* {
  box-sizing:border-box;
}

.bg {
  width:100%; height:100%;
  background-color:#33FF55;
}

.shadow {
  width:100px; height:100px;
  position:absolute;
  top:100px; left:100px;
  box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
}

<div class="bg">
  <div class="shadow"></div>
</div>

如何在盒子里面制作阴影？当我添加 background-color 属性时，它看起来相当不错，但看看角落，它不适合。

https://jsfiddle.net/y8o47pm9/5/

html, body {
  width:100%;height:100%; margin:0;
}

* {
  box-sizing:border-box;
}

.bg {
  width:100%; height:100%;
  background-color:#33FF55;
}

.shadow {
  width:100px;
  position:absolute;
  top:100px; left:100px;
  box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.45);
  color:#fff;
  font-size:25px;
  text-align:center;
  padding:20px 0;
}

<div class="bg">
  <div class="shadow">Test</div>
</div>

【问题讨论】：

请使用box-shadow 属性和inset 值
box-shadow:inset 0px 0px 50px 30px rgba(0, 0, 0, 0.5); 这样的

标签： css css-selectors

【解决方案1】：

使用 inset 在框内制作阴影。将box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5); 替换为box-shadow: inset 0px 0px 10px 3px rgba(0, 0, 0, 0.5);

html, body {
  width:100%;height:100%; margin:0;
}

* {
  box-sizing:border-box;
}

.bg {
  width:100%; height:100%;
  background-color:#33FF55;
}

.shadow {
  width:100px; height:100px;
  position:absolute;
  top:100px; left:100px;
  box-shadow: inset 0px 0px 10px 3px rgba(0, 0, 0, 0.5);
}

<div class="bg">
  <div class="shadow"></div>
</div>

【讨论】：