html - CSS ボックス シャドウ、上部インセットおよび下部標準

Question

要素がpあり、上部にボックス シャドウ インセット、下部に標準を配置したいと考えています。これは CSS を介して行うことができますか、それともこの効果には画像を使用する方がよいでしょうか?

.mali_oglas_text:before{
    content: "";
    width: 100%; height: 20px;
    top:0; left:0;    
    z-index: -1;
     box-shadow: inset 0 0 5px 0 5px rgba(0, 0, 0, 0.4);
     -moz-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.4);
}
.mali_oglas_text {clear: both; margin: 0 5px; padding: 7px; background: white; position: relative;
-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow:    0px 3px 10px rgba(0, 0, 0, 0.4);
box-shadow:         0px 3px 10px rgba(0, 0, 0, 0.4);
}

<p class="mali_oglas_text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. 
 </p>

Answer 1

これを試して。

.shadow
{
-webkit-box-shadow: inset 0px 8px 4px -4px #0f0, 
-moz-box-shadow: inset    0px 3px 10px #0f0;

-webkit-box-shadow: 0px 3px 10px #2a2a2a;
-moz-box-shadow:    0px 3px 10px #2a2a2a;
}