html - CSS で奇妙な影の効果を作成する

Question

DIV の影を作成しようとしていますが、通常のボックス シャドウではなく、ラジアル シャドウまたは何かのような影です。

box-shadow で試してみましたが、うまくいきません。何を使用できますか?

Answer 1

これを試して：

<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%);
}

から取得: http://der-auftritt.de/testcase/gradientshadow.html

ps 上部にも影が必要な場合は、同じコードで :before セレクターを使用します

いくつかの本当にクールなグラデーションの pps は、このツールを使用します:グラデーション エディター