gpt4 book ai didi

css - 棋盘 CSS 模式错误(对 Angular 线不美观)

转载 作者:行者123 更新时间:2023-11-28 08:45:03 36 4
gpt4 key购买 nike

我使用以下 CSS 代码创建了一个棋盘图案:

.testcheckerboard{
width: 200px;
height: 100px;

background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
background-position: 0 0, 20px 20px;
background-size: 40px 40px;
}

结果是我想要的棋盘格图案,但还显示了一条不美观的斜白线!

奇怪的是,在某些情况下,问题消失了。

Note the diagonal white line

有办法去掉这条线吗?我认为这只是一个抗锯齿错误,但我找不到控制或删除抗锯齿的方法...

我在 Internet 上找不到任何解决方案。

最佳答案

我通过在 css 中使用 inline-svg 找到了解决方法。

适用于所有 Windows 浏览器和 Android 浏览器,但我不确定它是否适用于 OSX (MAC)。

.testcheckerboard{
width: 200px;
height: 100px;
background-size: 40px 40px;

background-color: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(0,0,0)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E");
}
<div class="testcheckerboard"></div>

关于css - 棋盘 CSS 模式错误(对 Angular 线不美观),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47285121/

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com