CSS梯度 - 铬 - 恶心垂直条纹

enter image description here CSS梯度 - 铬 - 恶心垂直条纹

我有使用由http://www.colorzilla.com/gradient-editor/产生梯度这些CSS按钮 - 所述：简单地将鼠标悬停状态反转梯度，活动状态上增加：1px的;

正如你可以在图片中看到，上有“免费试用”按钮的左边缘上的“立即购买”按钮的右边一个微弱的竖条纹。

这仅适用于Chrome显示出来（在Safari看起来很好）。有没有人知道这个问题的解决方法？

我有以下

.big-button { 
    width: 120px; 
    height: 40px; 
    border: none; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    position: relative; 
} 
.big-button:hover { 
    cursor: pointer; 
} 
.big-button-wrap .big-button:active { 
    top: 7px !important; 
} 

.big-button.orange { 
    background: #fe7d0a; /* Old browsers */ 
    background: -moz-linear-gradient(top, #fda11a 0%, #ff6801 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fda11a), color-stop(100%,#ff6801)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #fda11a 0%,#ff6801 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #fda11a 0%,#ff6801 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #fda11a 0%,#ff6801 100%); /* IE10+ */ 
    background: linear-gradient(top, #fda11a 0%,#ff6801 100%); /* W3C */ 
    border: 1px solid #ff6801; 
} 
.big-button.orange:hover, .big-button.orange:active { 
    background: #fe7d0a; /* Old browsers */ 
    background: -moz-linear-gradient(top, #ff6801 0%, #fda11a 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6801), color-stop(100%,#fda11a)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ff6801 0%,#fda11a 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ff6801 0%,#fda11a 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #ff6801 0%,#fda11a 100%); /* IE10+ */ 
    background: linear-gradient(top, #ff6801 0%,#fda11a 100%); /* W3C */ 
}

来源

2012-03-13 pspahn

您可以发布相关的HTML或更好，创造的jsfiddle？ – j08691 2012-03-13 23:20:40

可能值得检查的是它实际上是导致条纹的渐变。如果您在按钮上设置纯色，问题是否会消失？ – 2012-03-14 00:40:21

小提琴这里补充：http://jsfiddle.net/QAafv/ - 注意条纹显示出来悬停并消失，如果你按下鼠标上的按钮。它看起来好像是它的边界半径造成的，而不是梯度。 – pspahn 2012-03-14 21:39:12

添加左边框：无; for .big-button.orange：hover and border-right：none;为绿色在小提琴中删除了我的线条（使用Chrome）。

这里是我的CSS：

.big-button.orange:hover, .big-button.orange:active { 
background: #fe7d0a; /* Old browsers */ 
background: -moz-linear-gradient(top, #ff6801 0%, #fda11a 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6801), color-stop(100%,#fda11a)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ff6801 0%,#fda11a 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ff6801 0%,#fda11a 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ff6801 0%,#fda11a 100%); /* IE10+ */ 
background: linear-gradient(top, #ff6801 0%,#fda11a 100%); /* W3C */ 
border-left:none;

}

.big-button.green:hover, .big-button.green:active { 
background: #6a9a23; /* Old browsers */ 
background: -moz-linear-gradient(top, #558711 0%, #8cb941 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#558711), color-stop(100%,#8cb941)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #558711 0%,#8cb941 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #558711 0%,#8cb941 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #558711 0%,#8cb941 100%); /* IE10+ */ 
background: linear-gradient(top, #558711 0%,#8cb941 100%); /* W3C */ 
border-right:none;

}

来源

2012-03-19 09:49:06 GStubbenhagen

啊完美...我发誓我曾尝试添加'border：none;'但我一定是错了。谢谢。 – pspahn 2012-03-19 16:27:01

我复制你的CSS一些CSS，无法再现问题。它看起来可能是包含两个按钮的包装问题？

尝试使施加到“背景图像”，而不是“背景”（它们通常是）的梯度。

来源

2012-03-16 23:10:45 awake12

CSS梯度 - 铬 - 恶心垂直条纹

回答

相关问题