locked
A CSS3 bug? Problem with CSS3 box-shadows

    Question

  • Hi, im have a div that has a box shadow applied to it. It works fine when the background color of application is default white (im using light.css)

    Here is HTML code:

    div id="wrapper" class="wrapper curved curved-hz-1"></div>

    Here is CSS code:

    .wrapper {
        position: relative;
        width: 1109px;
        height:388px;
        border: 1px solid rgba(0,0,0,0.1);
        background-color: #fff;
    }
    .wrapper:before,
            .wrapper:after {
                content:"";
                position:absolute;
                z-index:-2;
            }
            .curved:before {
                top:10px;
                bottom:10px;
                left:0;
                right:50%;
                box-shadow:0 0 15px rgba(0,0,0,0.7);
                border-radius:10px / 100px;
            }    
                .curved-hz-1:before {
                top:5px;
                bottom:0;
                left:100px;
                right:100px;
                border-radius:100px / 10px;

            }

    and here is result:

    If I set any background color to application in default.css these box-shadows disappear. Is this a known issue/bug?

    Thanks in advance.

    Thursday, April 26, 2012 6:39 PM

Answers

All replies

  • Seems to work OK to me.

    Can you share your css for body?

    body {
        background-color: #b6ff00
    }


    Jeff Sanders (MSFT)

    Monday, May 14, 2012 6:38 PM
    Moderator
  • Seems like I posted it long time ago. I figured it out a week later that I was applying background color to #contenthost in default.css and it wasn't working. Now by applying background to body instead of #contenthost works, however #contenthost background property should also work in same way as body background.
    Tuesday, May 15, 2012 9:47 PM