CODEWITHSUNDEEP
htmlcssrenderingbox-shadow
Max Payne
Max Payne

Reputation: 2438

Inset box-shadow not following the curve

ISSUE FIDDLE 1

This is the fiddle in question : Fiddle 1

#one {
    height: 200px;
    width: 200px;
    border-radius: 100% 0 0 0;
    background-color: plum;
    box-shadow: inset 40px 40px 0 0 red, inset 80px 80px 0 0 blue, inset 120px 120px 0 0 green;
}
<div id="one"></div>

In this particular example, I have used 100% top-left border radius, and all other border radii are 0%, and height is equal width, producing a quadrant.

Now I added 3 inset box-shadows to the main element with x,y offsets. I expect the box-shadows to follow the curve, and be parallel to each other, like this :

enter image description here

This is the output instead :

enter image description here

ISSUE FIDDLE 2

This is another example of box-shadow not following the curve. This one's without x-y offsets. Fiddle 2

div {
    height: 200px;
    width: 200px;
    border-radius: 100% 0 0 0;
    background-color: plum;
    box-shadow: inset 0px 0px 0 70px green;
}
<div></div>

In this case, pink area should be a quadrant, but looks like a triangle.

enter image description here

Why is inset box-shadow losing the curve as the spread radius increases? is it a bug? It seems not to be one as all major browsers give the same output.

Upvotes: 4

Views: 672

Answers (1)

Joshua Whitley
Joshua Whitley

Reputation: 1186

This is not a bug but a correct implementation of box-shadow. Because the outside border-radius is a curve with a 200px height (100% of the box height) and it is the outer-most object being used for the tracing of the first inset box-shadow, the first curve is as you'd expect. The 2nd, however, has to draw a line that is on the outside of a circle with a 200px radius. However, since the 2nd box-shadow is inset further, less of the circumference of that circle will be shown, making it appear to be closer to a straight line. The further each box-shadow is inset, the closer to a straight line it appears because you're seeing less and less of the edge of the next 200px-radius circle.

If you uncomment the #wrapper CSS in this fiddle: http://jsfiddle.net/31xLprkv/1/, you will see the same effect. Because SO requires code with a Fiddle URL, here's the code from it:

HTML

<div id="wrapper">
    <div id="one"></div>
</div>

CSS

/*#wrapper {
    height: 200px;
    width: 200px;
    overflow: hidden;
}*/

#one {
    height: 200px;
    width: 200px;
    margin: 120px;
    border-radius: 200px 0 0 0;
    background-color: plum;
    box-shadow: -40px -40px red, -80px -80px blue, -120px -120px green;
    float: left;
}

Because border-radius only causes a single curve that is a set radius and because box-shadow will only ever reproduce an exact copy of the rendered border-radius behind the existing element, you will not be able to implement your desired effect with just box-shadow.

Upvotes: 3

Related Questions