时间戳

首页 > 解决方案 > 如何在透明元素内制作盒子阴影

css - 如何在透明元素内制作盒子阴影

问题描述

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

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>

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

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>

标签： csscss-selectors

解决方案

使用 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>

推荐阅读