Re: [csswg-drafts] [css-backgrounds] The shape of box-shadow should be a circle for a box with border-radius:50% and big spread (#7103)

I tend to agree that [geometric similarity](https://en.wikipedia.org/wiki/Similarity_(geometry)) can sound good.

However, this would imply that the shadow wouldn't spread by the same amount in both axes, e.g.

```html
<div style="width: 500px; height: 100px; background: cyan; border-radius: 250px / 50px; box-shadow: 0 0 0 125px blue"></div>
```

![](https://user-images.githubusercontent.com/7477678/169880242-9c57cc85-7bfa-4cb8-a355-4db9dcecd17f.png)

The border area is cyan, it's 500x100 with a border-radius of `250px / 50px`, i.e. 50%. If the shadow spreads 125px horizontally, then border radius of the shadow should have an X component of `250+125 = 375`, and the Y component should preserve the ratio in order to get a similar shape: `50 * 375/250 = 75`. So the border radius of the shadow should be `375px / 75px`.

However, while the shadow is 750px wide, so 375px is the 50%, the shadow should also spread 125px vertically, becoming 35px tall. This breaks the similarity: it should be 150px tall, so that 75px is the 50%. This difference is represented in red in the image.

So similarity would require changing the [spread distance](https://drafts.csswg.org/css-backgrounds-3/#spread-distance) to apply in the biggest dimension, and resolving the other one proportionally. For continuity, this would need to happen regardless of whether there is a `border-radius`. But this would worsen usecases where you don't care about similarity, and instead just want a shadow of the same thickness in both axes, e.g. in order to have a secondary border.



-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7103#issuecomment-1135001770 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 23 May 2022 18:27:14 UTC