css - CSS重复线性渐变线宽差异问题
问题描述
这是我在 div 上的线性渐变,但水平线的宽度不同
.pattern1{
height: 252px;
background:
linear-gradient(to right, red 30px, transparent 0),
repeating-linear-gradient(to bottom, white 0 40px, black 0 42px)
}
<div class='pattern1'></div>
我们可以做些什么来使线宽保持不变。我正在使用 chrome 版本 81.0.4044.138
解决方案
这是一种不同的方式。也许你不会有问题:
.pattern1{
height: 252px;
background:
linear-gradient(to right, red 30px, transparent 0),
radial-gradient(circle at bottom, black 2px, transparent 0) top/ 1px 42px;
}
<div class='pattern1'></div>
推荐阅读
- javascript - 使用自定义用户代理重定向网页
- c - 在 C 中,我如何知道字符串 char 是否具有特定值?
- webhooks - 气流上 Teams webhook 的连接设置出现一般错误
- html - 如何使用 html 和 CSS 创建“盾牌”形状
- android - 使用 react-native 和 selenium 执行任务 ':app:mergeDebugJavaResource' 失败
- vb.net - Winform Datagridview 工程符号
- javascript - (Canvas, next.js)) 使用canvas生成某种颜色的照片发回*无需下载*
- javascript - 我可以修改 web 应用程序以使 Chrome 不认为聊天输入是密码字段吗?
- javascript - Javascript函数:减少助手的冗余
- mysql - 在比较中使用 concat 会返回所有内容