mirror of
https://github.com/RGBCube/serenity
synced 2025-05-14 09:54:57 +00:00
d4932196cc
With this change, instead of applying only the border-radius clipping from the closest containing block with hidden overflow, we now collect all boxes within the containing block chain and apply the clipping from all of them.
30 lines
679 B
HTML
30 lines
679 B
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="reference/nested-boxes-with-hidden-overflow-and-border-radius-ref.html" />
|
|
<style>
|
|
.outer {
|
|
overflow: hidden;
|
|
border-radius: 100px;
|
|
background-color: magenta;
|
|
width: 500px;
|
|
height: 500px;
|
|
}
|
|
|
|
.middle {
|
|
overflow: hidden;
|
|
border-radius: 50px;
|
|
transform: translate(10px, 10px);
|
|
background-color: lawngreen;
|
|
}
|
|
|
|
.inner {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: black;
|
|
transform: translate(10px, 10px);
|
|
}
|
|
</style>
|
|
<div class="outer">
|
|
<div class="middle">
|
|
<div class="inner"></div>
|
|
</div>
|
|
</div>
|