使父级的伪不透明度剪辑为子级的边界半径

Question

我正在尝试让我的父级将不透明度（变暗）样式叠加到子元素上，但是该子元素可以具有不同的边框半径'-10px，50%等。尝试动态制作叠加片段。

如果我将其设置为100%，则它适用于50%，但会中断10px，依此类推。

不幸的是，HTML标记不能移动太多。

这有可能实现吗？最终结果是小提琴中不应出现鲜红色，因为它应该完全被不透明覆盖物覆盖。

JSFiddle Link

Answer 1

答案在于让border-radius: inherit可以访问您的标记

https://jsfiddle.net/7nfLqpbt/2/