Как сделать тень коробки внутри прозрачного элемента - PullRequest
Новая
       151

Как сделать тень коробки внутри прозрачного элемента

1 голос
/ 07 августа 2020

Когда элемент прозрачный, тени нет внутри этого элемента. Посмотрите на этот пример: 

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>

1 Ответ

0 голосов
/ 07 августа 2020

Используйте вставку, чтобы создать тень внутри коробки. Замените 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>
...