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梯度 - 鉻 - 噁心垂直條紋

回答

相關問題