Html 在CSS中创建奇怪的阴影效果

我正在尝试为DIV创建一个阴影，但它不是普通的长方体阴影，是一个看起来像放射状阴影之类的阴影

我已经试过使用box shadow，但它不起作用。我能用什么？

试试这个：

<div class="box">
  <div class="shadow">Heading</div>
</div>


.shadow { background:#fff;padding:10px; border:solid 1px #ccc }
.box { position:relative; width:100%; margin-top:30px; z-index:0}
.box .shadow:after{
    bottom: -5px;
    content: " ";
    height: 8px;
    display:block;
    text-indent: -9999px;
    width: 100%;
    left:0;
    position:absolute;
    z-index:-1;
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background-image: -ms-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
    background-image: -moz-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
    background-image: -o-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(radial, center top, 0, center top, 490, color-stop(0, #aaaaaa), color-stop(1, #FFFFFF));
    background-image: -webkit-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
    background-image: radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
}

标题
.shadow{背景：#fff；填充：10px；边框：实心1px#ccc}
.box{位置：相对；宽度：100%；页边距顶部：30px；z索引：0}
影子：之后{
底部：-5px；
内容：“；
高度：8px；
显示：块；
文本缩进：-9999px；
宽度：100%；
左：0；
位置：绝对位置；
z指数：-1；
背景图片：url（数据：数据：数据：图像/svg+xml；基本64，PD94BWWWWWWWWWWWWWWWWWWWWWWWWWWWvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv基德XZDG9WIG9MZNLDD0IMCUIIHN0B3ATY29SB3I9I9IIHYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYWYW；0ET0IMSIVPGOGIDWCMFCAWFSR3JHZGLLBNQ+CIAGPHJLY3QGED0ILTUWIIB5PSITNPZHROPSIXMDEIIGHLAWDODD0IMTAXIBMAWXSPSJ1CMWOI2DYWQTDWNNZY1NZW5LCMF0ZWQPIIAVPGO8L3N2ZZZ4=）；
背景图像：-ms径向梯度（中心顶部，椭圆最远侧，#AAAAA 0%，#FFFFFF 100%）；
背景图像：-莫兹径向梯度（中心顶部，椭圆最远侧，#AAAAA 0%，#FFFFFF 100%）；
背景图像：-o-径向梯度（中心顶部，椭圆最远侧，#AAAAA 0%，#FFFFFF 100%）；
背景图像：-webkit渐变（径向，中上，0，中上，490，颜色停止（0，#aaaaaa），颜色停止（1，#FFFFFF））；
背景图像：-webkit径向渐变（中心顶部，椭圆最远侧，#AAAAA 0%，#FFFFFF 100%）；
背景图像：径向梯度（中心顶部，椭圆最远侧，#AAAAA 0%，#FFFFFF 100%）；
}

摘自：

p、 如果您希望阴影也位于顶部，请使用带有相同代码的：before选择器

---

p、 另外，对于一些非常酷的渐变，请使用此工具：

哇，太酷了。这几天你能做的真是太棒了。但它在哪些浏览器中工作？那是值得的adding@Pekka添加了完整的跨浏览器代码，SVG hack是为IEIt设计的，效果非常好！谢谢但我不能让它在顶端工作。我认为有些事情需要改变，比如底部：-5px，但我尝试了，但没有成功。我会继续努力，非常感谢@Gallopin尝试顶部：-5px，使其位于阴影容器上方5px处