html - 如何在框阴影中使用 15 px，#000000 7 % 不透明度到 #000000 0 % 不透明度？

Question

我是 css 和 html 的新手，想用这个计划植入这个盒子阴影吗？

 Box shadow: 15 px, #000000 7 % opacity to #000000 0 % opacity

为此，编写此 css:

box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7) #dadada;

但这不是我的目的输出。我如何为此编写 css？谢谢大家。

Answer 1

你可以用伪元素和linear-gradient实现这个结果，就像这样

body{
  background-color:wheat;
}
#demo{
  position: relative;
  margin:20px;
  width: 50px;
  height: 50px;
  background-color:aqua;
}
#demo:before{
  position: absolute;
  z-index: -1;  
  left:-15px;
  top:-15px;
  width: 80px;
  height: 80px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  content: '';
}

<div id="demo"></div>