0

下の境界線の下にボックスショーがあるH2を作成しようとしています

ここに私の「ベース」コードがあります:

<div class="bloc-principal">
<h2 id="toto">My H2</h2>
</div>
<style type="text/css">
   #toto{
     box-shadow: 0 4px 2px -2px gray;
    }
</style>

しかし、私はこの結果を得たい: http://www.hostingpics.net/viewer.php?id=275479boxshadow.png

反対側には境界線はなく、下側の真ん中にあるこの小さな影だけです.

チュートリアルを見つけようとしましたが、まったく同じ結果が得られませんでした....

4

2 に答える 2

0

ボックスを半透明にすることができるように、シャドウレイヤーにクリッピングを追加します

#toto {
   position:relative;
   background: rgba(8,55,81,0.8);
   height:100px;
}

#toto:after {
   position: absolute;
   width: 90%;
   height: 5%;
   left: 5%;
   border-radius: 50%;
   z-index: -1;
   bottom: 0%;
   content: "";
   box-shadow: 0 4px 12px rgba(0,0,0,0.8);
   clip:rect(8px,auto,40px,auto);
}
于 2014-04-07T21:50:16.663 に答える