Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<title>Box decorations are captured as group style</title>
<meta name=fuzzy content="maxDifference=0-10; totalPixels=0-200000">
<style>
* {
box-sizing: border-box;
}
html {
view-transition-name: none;
}
body {
margin: 0;
background: lightpink;
}
.target {
width: 100px;
height: 100px;
margin: 30px;
background: green;
overflow: hidden;
border: 3px solid yellow;
outline: 2px solid blue;
border-radius: 10px;
background-image: linear-gradient(orange, cyan);
box-shadow: -10px 10px lightcoral;
}
.at-end {
border: 10px solid red;
outline: 5px solid green;
border-radius: 10px 20px 0 4px;
background-image: linear-gradient(pink, black);
box-shadow: 2px -15px lightslategray;
}
@keyframes anim {
from {
border: 3px solid yellow;
outline: 2px solid blue;
border-radius: 10px;
background-image: linear-gradient(orange, cyan);
box-shadow: -10px 10px lightcoral;
}
to {
border: 10px solid red;
outline: 5px solid green;
border-radius: 10px 20px 0 4px;
background-image: linear-gradient(pink, black);
box-shadow: 2px -15px lightslategray;
}
}
.animate {
animation-name: anim;
animation-duration: 1000s;
animation-play-state: paused;
animation-timing-function: steps(2, start);
}
.override {
border: 1px groove blue;
outline: none;
border-radius: 2px;
background: grey;
background-image: none;
box-shadow: 3px 3px purple;
}
</style>
<body>
<div class="passthrough target"></div>
<div class="at-end target"></div>
<div class="animate target"></div>
<div class="override target"></div>
</body>