Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Another solution is to have matching inner and outer borders combined with <code>border-radius</code> is to "fake" the border using the <a href="https://developer.mozilla.org/en/CSS/box-shadow"><em><code>&lt;spread-radius&gt;</code></em></a> value of the <code>box-shadow</code> property. This produces a solid shadow which can easily pass for a regular border.</p> <p>For instance, to achieve a 4px border and a 4px white border radius, try this:</p> <pre><code>/* rounded corners */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /* drop shadow */ -webkit-box-shadow: 0px 0px 0px 4px #fff; -moz-box-shadow: 0px 0px 0px 4px #fff; box-shadow: 0px 0px 0px 4px #fff; </code></pre> <p>If you want to add a "real" drop shadow to the entire container, you can simply chain your shadow statements like so:</p> <pre><code>/* drop shadow */ -webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0), 1px 1px 8px 0 rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0), 1px 1px 8px 0 rgba(0,0,0,0.4); box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0), 1px 1px 8px 0 rgba(0,0,0,0.4); </code></pre> <p><strong>Note:</strong> Keep in mind here that the order of the statements is the order in which it will be rendered.</p> <p>The only thing to beware of is that the initial "faux border" will overlap the first X pixels (where X is the width of the border) of any shadow you want beneath it (and combine, if you're using RGBa opacity on it below 100%.)</p> <p>So it won't work in <em>all</em> situations, but it'll get the majority. I use this pretty frequently when regular borders are not ideal.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload