html - CSS网格中的无意间隙
问题描述
我正在尝试关注这篇 Stripe 博客文章:
https://stripe.com/blog/connect-front-end-experience
虽然我的最终产品通常看起来像教程中的内容,但我的浏览器似乎无意间出现了空白。我不愿意称它们为间隙,因为间隙在 CSS 网格中具有特定含义,而我的错误似乎更像是随机舍入错误。
这里有一些图片进行比较。Safari 处理网格比 chrome 更优雅,但仍然存在问题。请注意照片中的像素化白线。
条纹最终产品:
我在 Safari 上的尝试:
我在 Chrome 上的尝试:
这是我正在使用的代码:
.stripes {
display: grid;
grid: repeat(5, 200px) / repeat(10, 1fr);
transform: skewY(-12deg);
transform-origin: 0;
}
.stripes :nth-child(1) {
grid-column: span 3;
}
.stripes :nth-child(2) {
grid-area: 3 / span 3 / auto / -1;
}
.stripes :nth-child(3) {
grid-row: 4;
grid-column: span 5;
}
.blue {
background: blue;
}
.red {
background: red;
}
.special1 {
background: linear-gradient(to bottom left, #1890ff, #42C6EB);
}
.special2{
background: linear-gradient(to left, #1890ff, #42C6EB);
}
.special3{
background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2));
}
.topRow {
background: linear-gradient(to top, rgb(52, 173, 242), #1890ff);
}
.secondRow {
background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242))
}
.thirdRow {
background: #42C6EB
}
.fourthRow {
background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB)
}
.fifthRow {
background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8))
}
<div class="stripes">
<div class="special1"></div>
<div class="special2"></div>
<div class="special3"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="fourthRow"></div>
<div class="fourthRow"></div>
<div class="fourthRow"></div>
<div class="fourthRow"></div>
<div class="fourthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
</div>
玩了一会儿之后,问题似乎在于使用linear-gradient
. 当我从渐变色切换到纯色时,竖条会消失,但沿对角线条纹的细小锯齿线不会消失。有任何想法吗?
解决方案
这是一个亚像素渲染问题。不幸的是,没有简单和通用的修复方法,因为每个浏览器在处理小于1px的值时都会以不同的方式处理计算。
在您的情况下,您可以为整个容器添加背景以避免(或至少最小化)这种影响:
.stripes {
display: grid;
grid: repeat(5, 200px) / repeat(10, 1fr);
background:linear-gradient(to top,rgba(66, 198, 235, 0.2),#1890ff);
transform: skewY(-12deg);
transform-origin: 0;
}
.stripes :nth-child(1) {
grid-column: span 3;
}
.stripes :nth-child(2) {
grid-area: 3 / span 3 / auto / -1;
}
.stripes :nth-child(3) {
grid-row: 4;
grid-column: span 5;
}
.blue {
background: blue;
}
.red {
background: red;
}
.special1 {
background: linear-gradient(to bottom left, #1890ff, #42C6EB);
}
.special2{
background: linear-gradient(to left, #1890ff, #42C6EB);
}
.special3{
background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2));
}
.topRow {
background: linear-gradient(to top, rgb(52, 173, 242), #1890ff);
}
.secondRow {
background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242))
}
.thirdRow {
background: #42C6EB
}
.fourthRow {
background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB)
}
.fifthRow {
background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8))
}
<div class="stripes">
<div class="special1"></div>
<div class="special2"></div>
<div class="special3"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="topRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="secondRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="thirdRow"></div>
<div class="fourthRow"></div>
<div class="fourthRow"></div>
<div class="fourthRow"></div>
<div class="fourthRow"></div>
<div class="fourthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
<div class="fifthRow"></div>
</div>
顺便说一句,如果您只想实现视觉效果,您可以考虑一个容器内的多个背景,而不是所有这些代码:
.container {
height:1000px;
transform: skewY(-12deg);
transform-origin:0;
background:
/*special 1*/
linear-gradient(to bottom left, #1890ff, #42C6EB) 0 0/calc(3*100%/10) calc(100%/5),
/*special 2*/
linear-gradient(to left, #1890ff, #42C6EB) 100% calc(100%/2)/calc(3*100%/10) calc(100%/5),
/*special 3*/
linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2)) 0 calc(3*100%/4)/50% calc(100%/5),
/*Top row*/
linear-gradient(to top, rgb(52, 173, 242), #1890ff) 0 0/100% calc(100%/5),
/*second row*/
linear-gradient(to top, #42C6EB, rgb(52, 173, 242)) 0 calc(100%/4)/100% calc(100%/5),
/*third row*/
linear-gradient(#42C6EB, #42C6EB) 0 calc(100%/2)/100% calc(100%/5),
/*fourth row*/
linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB) 100% calc(3*100%/4)/50.1% calc(100%/5),
/*fifth row*/
linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8)) 0 100%/100% calc(100%/5);
background-repeat:no-repeat;
}
<div class="container">
</div>
推荐阅读
- xamarin.forms - 使用 Prism.Autofac 库 Xamarin .Net Standard 2.0 时 App.Current.MainPage 为空
- html - 向模态窗口添加滚动条
- javascript - localStorage 在 react js chrome 中不起作用
- python - 对本地文件夹中的所有文件重复 BeautifulSoup 抓取
- ethereum - 警告:不推荐使用从地址类型继承的合约成员“余额”。坚固性
- c# - 对有关初始化变量的课程说明感到困惑
- machine-learning - 数据科学:当 csv 文件有数千列时如何处理和清理数据
- pandas - lightgbm 是否按顺序返回预测?
- javascript - CKEDITOR 没有第二次初始化
- vb.net - 在 Visual Studio 中突出显示组合框/文本框时如何更改标签的颜色?