Css: Why Background-Color Breaks/Removes the Box-Shadow

CSS: Why background-color breaks/removes the box-shadow?

You just need to add z-index and position:relative; see the example. http://jsfiddle.net/SqvUd/2/

Why background-color overlap the box-shadow?

add z-index negative on td

.results-table td{
    position: relative;
    z-index: -1;
}

Why does a background break a box-shadow inset effect?

Since I am having this problem too and I too don't see this behaviour being normal, I filed a bug report over at mozilla

I can reproduce the problem in Google Chrome too, though, so I wonder whether this is really a bug. But it could be.

edit:

Indeed it's not a bug, but just the way it's meant to work. So, on the basis of this information, I forked your jfiddle example and came up with this solution:

The markup now looks like this:

<div id="box">
    <div id="wrapper">
        <div id="box_content">
            Content here
        </div>
        <div id="mask"></div>
    </div>
</div>

The mask becomes another div, which is layered on top of the #box_content one by means of being absolutely positioned. This is the CSS:

#wrapper{
    position: relative;
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    margin: 10px;
}
#mask {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    height: 100%;

    pointer-events: none; /* to make clicks pass through */

    box-shadow: 0 0 10px #000000 inset;
}
#box_content{
    background-color: #0ef83f;
    height: 100%;
}

Changing background-color of child removes box-shadow on parent

I think it's just a painting effect cos it doesn't break your box-shadow

css box shadow, not working when parent div has background

The problem is due to the fact that the shadow has a z-index of -1, which means that the parent div will be in front of the shadow. So if the parent has a non-transparent background, it will cover the shadow. You should assign a z-index smaller than -1 to the parent.

.parent{background-color:#eee; position:relative; width:100%; height:300px; z-index: -2}

How do you use an inset box-shadow with a background-color with before and after?

You didn't specify how you want to accomplish the borders. In your title you box-shadow, but in your description you try to do it with borders:

Row should highlight on hover, cell should highlight a different color on hover, row should have 4px border on hover but cells should not shift up/down on hover.

I didn't do it with an actual border. Instead, I set an outline and just set an outline-offset. This should be what you're looking for.

table {

  border-collapse: collapse;

}

table tr td {

  border: 1px solid black;

  padding: 5px;

}

table tr:hover {

  background: yellow;

  outline: 4px solid blue;

  outline-offset: -4px;

}

table tr td:hover {

  background: red;

}

<table>

  <tbody>

    <tr>

      <td>AAA</td>

      <td>BBB</td>

      <td>CCC</td>

      <td>DDD</td>

    </tr>

    <tr>

      <td>AAA</td>

      <td>BBB</td>

      <td>CCC</td>

      <td>DDD</td>

    </tr>

    <tr>

      <td>AAA</td>

      <td>BBB</td>

      <td>CCC</td>

      <td>DDD</td>

    </tr>

  </tbody>

</table>

Why are box-shadow and margin not displaying correctly for a division of my code?

I noticed 2 things, on line 4 of your .html file you didn't close the bracket on your name meta tag, the second thing is that you used a line break character on the background-color line, this might cause problems on your browser, if you're using VS Code you can check for unusual line terminators on editor.unusualLineTerminators, I tested your file fixing these and everything seems to be working fine on the box shadow property. enter image description here

---

Related Topics