title: CSS box-shadow, top inset and bottom standard
body: <p>I have <code>p</code> element, and I want to put top box-shadow inset, and bottom standard. Can this be done via CSS or it is better to use images for this effect?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="mali_oglas_text"&gt;
                          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. 
   &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>