css - 如何在框的底部显示这种阴影-三 Angular 形是深度阴影

Closed. This question needs to be more focused。它当前不接受答案。












                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。

                        5个月前关闭。



View Image

看一下上面弹出窗口底部的阴影，我如何得到这种阴影

body{
  background: rgba(135,206,250, 0.5);
}
.card {
  width: 500px;
  height: 250px;
  background: white;
}

<div class="card">

</div>

最佳答案

body{
  background: rgba(135,206,250, 0.5);
}

.card {
  width: 500px;
  height: 250px;
  background: white;
}


.shadow
{
	position: relative;
}

.shadow:before, .shadow:after
{
	position: absolute;
	z-index: -1;
	content: "";
	bottom: 25px;
	left: 10px;
	width: 50%;
	top: 80%;
	-webkit-box-shadow: 0 35px 20px #989898;
	-moz-box-shadow: 0 35px 20px #989898;
	box-shadow: 0 35px 20px #989898  ;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

.shadow:after
{
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
  right: 10px;
  left: auto;
}

<!DOCTYPE html>
<html>
<body>
<div class="card shadow">
</div>
</body>
</html>

关于css - 如何在框的底部显示这种阴影-三 Angular 形是深度阴影，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57588223/