极客观点
项目管理
HarmonyOS
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 400px;
height: 200px;
background: linear-gradient(red 50%,blue);
border: 10px dashed #000000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
原因确实是楼上说的.
那么照此推测.如果将背景放大20px,然后再向上,向右各偏移10px,就应该正常了.
html5
background-size: calc(100% + 20px) calc(100% + 20px);
background-position: -10px -10px;实际验证确实如此.
border:2px dashed #fff;
background-image: linear-gradient(to right, #C5D0F0, #637A9B);
如果这样设置一个标签，左侧会有几个点颜色很重，no-repeat解决了，但是上下虚线框没了。如果这样设置
background-size: calc(100% + 4px) calc(100% + 4px);
background-position:-2px -2px;
就完美了
5 回答1.3k 阅读
5 回答2.2k 阅读
2 回答786 阅读✓ 已解决
4 回答797 阅读✓ 已解决
2 回答1.1k 阅读✓ 已解决
2 回答953 阅读✓ 已解决
2 回答2.5k 阅读
设置background-repeat: no-repeat看看效果就知道了。
大概原因是这样：
因为背景图没有设置background-repeat属性，所以在边框的地方会重复渲染背景图。
而上边框刚好渲染的是背景图的下边缘，下边框正好相反。同理左右边框也是渲染了背景图的。