Note that there are some explanatory texts on larger screens.

plurals
  1. PObox-shadow color in Firefox
    primarykey
    data
    text
    <p>I am trying to fuse a block and its <code>box-shadow</code>.</p> <p>The problem is: <code>box-shadow</code> start color in Firefox is not right. And it seems to be transparent a bit.</p> <p>As a result I (and my customers) can see the border between the block and its shadow, which is ultimately undesirable in my case.</p> <p><a href="http://jsfiddle.net/v9Bzn/3/" rel="nofollow noreferrer">http://jsfiddle.net/v9Bzn/3/</a></p> <pre><code>&lt;div class="white"&gt; &lt;div class="black black-shadow"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="black"&gt; &lt;div class="white white-shadow"&gt;&lt;/div&gt; &lt;/div&gt; .white { background: white; } .black { background: black; } .white-shadow{ box-shadow: white 0 0 20px 30px; } .black-shadow{ box-shadow: black 0 0 20px 30px; } </code></pre> <h2>Firefox 25.0.1 (incorrect)</h2> <p><img src="https://i.stack.imgur.com/hKUbp.png" alt="Firefox"></p> <h2>Chromium 31.0.1650.57 (235101) (correct)</h2> <p><img src="https://i.stack.imgur.com/c0DqC.png" alt="Chromium"></p> <p>I can use <code>#fcfcfc</code> instead of <code>white</code> but the border appears in Chromium then.</p> <p>What can I do to make <code>box-shadow</code> to be the same color as its <code>div</code>?</p> <h2>Update</h2> <p>Yes, the problem is subtle. I can see 2 colors on this image (zoomed in incorrect image with color codes):</p> <p><img src="https://i.stack.imgur.com/SYApX.png" alt="enter image description here"></p> <p>It is my monitor that makes issue more apparent for me. But there is no such issue in Chromium.</p> <p>Looks like a minor bug but for some web page designs might be evident.</p>
    singulars
    1. This table or related slice is empty.
    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.
 

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