如何在框阴影中使用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来实现此结果，就像这样

＆＃13;

＆＃13;

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: '';
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;