CSS棋盘组件忽略边框半径

我想要一个棋盘背景来表示透明度。我创建了一个组件，可以在需要棋盘格背景的任何地方使用，如下所示：

const Checker: React.FC = () => {

    const styles = reactCSSExtra({
        "default": {
            container: {
                position: "absolute",
                width: "inherit",
                height: "inherit",
                background: `repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% / 10px 10px,
                             repeating-conic-gradient(#ffffff 0% 25%, transparent 0% 50%) 100% / 10px 10px`,
                opacity: 0.5,
                zIndex: -100,
            },
        },
    });

    return (
        <div style={styles.container}></div>
    );
}

export default Checker;

const Checker:React.FC=（）=>{
const styles=reactCSSExtra({
“默认值”：{
容器：{
位置：“绝对”，
宽度：“继承”，
身高：“继承”，
背景：`重复圆锥梯度（#808080 0%25%，透明0%50%）50%/10px 10px，
重复圆锥梯度（#ffffffff 0%25%，透明0%50%）100%/10px 10px`，
不透明度：0.5，
zIndex:-100，
},
},
});
返回(
);
}
导出默认检查器；

我通过创建一个容器div来使用它，在其中放置棋盘格和其他组件：

<div>
    <div> ...rest here </div>
    <Checker/>
</div>

……在这里休息

我在中使用棋盘格的所有组件都将4px边框半径应用于顶部容器，但是棋盘格似乎不受此影响。即使对容器应用了

溢出：hidden

，检查器似乎仍然有一些“工件”：

在这两张图片中，棋盘格完全忽略边界半径

有时，根据浏览器的缩放级别，它将受到边界半径的影响。这些照片是以500%的放大倍数拍摄的，但在半固定的间隔内，边界半径会影响渐变，尽管我现在无法做到这一点。它发生在Chrome和Firefox上。 我认为这可能只是一个渐变问题，但不同的渐变棋盘甚至基于SVG的棋盘也会出现这种情况

---

有人知道问题可能是什么吗？

尝试添加

位置：相对并在该DIV内移动棋盘格

<div>
    <div style={{ position: 'relative' }}>
    
      <Checker/> 
    
      ...rest here 
     </div>
</div>


……在这里休息
不幸的是，这并没有解决问题-仍然溢出divI编辑的答案，现在应该可以了：）我想说的是，这不起作用，因为它需要绝对位置才能使两个组件重叠，但在混乱的情况下，我设法解决了它。我不确定我做了什么，因为我觉得我以前都试过了，但现在它起作用了。编辑：显然这是由不同的成分引起的。如果我禁用它，问题就会消失。检查器仍应具有绝对位置。解决方案是在棋盘格的父对象上设置相对位置，这样棋盘格绝对位置的宽度就不能大于父对象的宽度，在这种情况下，父对象就是内容。