实际上，
border-radius当过渡发生时，它并没有得到尊重。
禁用过渡后，为什么不会出现此问题？
- 如果样式发生更改，但没有满足创建合成层的所有条件（即，没有动画或过渡或3D变换等），则不满足：
- 没有合成层，因此每次更改似乎都会重新粉刷整个区域。由于发生了完整的重新绘制，因此没有问题。
在开发人员工具中启用“显示油漆矩形”和“显示复合层边框”后，请查看以下代码段（以全屏模式显示），并注意以下几点：
- 没有创建带有橙色边框的区域（合成层）。
- 每次通过将焦点放在
a
标签之一上来修改样式，整个区域都会重新绘制（红色或绿色闪烁区域）。
.outer {
position: relative;
height: 100px;
width: 100px;
margin-top: 50px;
border: 1px solid red;
overflow: hidden;
}
.border-radius {
border-radius: 50px;
}
.inner {
width: 50px;
height: 50px;
background-color: gray;
opacity: 0.75;
}
a:focus + .outer.border-radius > .inner {
transform: translateX(50px);
height: 51px;
opacity: 0.5;
}
Test
I am a strange root.
