如何防止背景和渐变之间的1像素线?

时间:2015-11-11 19:13:56

标签: css background linear-gradients

picture of problem

缩放时,此线条出现在块和渐变背景之间。我怎么摆脱这条线?具体来说,在Safari中注意到(在缩放几次后,Cmd +)

参见jsfiddle:http://jsfiddle.net/lokapujya/eb9dv192/3/

a {
display: inline-block;
position: relative;
margin: 1em;
padding: 0.8em 1.6em;
background: linear-gradient(60deg, #005984 50%, transparent 50%) 100% 0, linear-gradient(-60deg, transparent 50%, #005984 51%) 100% 100%, linear-gradient(-90deg, transparent 1em, #005984 1em);
background-repeat: no-repeat;
background-size: 1em 51%, 1em 50%, 100% 100%;
color: white;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 133%;
text-decoration: none;
text-transform: uppercase;

}

1 个答案:

答案 0 :(得分:0)

更新background-size似乎已经成功了。

将行更改为background-size: 1em 51%, 1em 50%, 101% 100%;

http://jsfiddle.net/eb9dv192/5/