問題描述

需要做一個(gè)類似上圖中形狀的返回按鈕

參考 一個(gè)按鈕CSS3 返回按鈕 這個(gè)例子，做出了如下的返回按鈕：特殊樣式 返回按鈕按下彈起的顏色效果只有右邊的p有效，而左邊的小箭頭是:before和:after加進(jìn)去的，請(qǐng)問，它的顏色怎么設(shè)置 為漸變色？ 達(dá)到讓它看起來和右邊的部分渾然一體 的效果。。。

問題解答

嗨,你需要的是這個(gè)CSS Button

如下

.myButton { background-color:#44c767; -moz-border-radius:28px; -webkit-border-radius:28px; border-radius:28px; border:1px solid #18ab29; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; padding:16px 31px; text-decoration:none; text-shadow:0px 1px 0px #2f6627;}.myButton:hover { background-color:#5cbf2a;}.myButton:active { position:relative; top:1px;}回答2：

暴力一點(diǎn)的解決方案是，使用圖片。什么圓角啊漸變啊不兼容的問題都給我起開

可以使用邊框漸變border-image:linear-gradient(.....)

我有一個(gè)思路：不要用 border 做小箭頭，用 transform 變形做小箭頭。用 transform 的話就可以用背景漸變了。要注意的一點(diǎn)是，由于小箭頭要旋轉(zhuǎn) 45 度，你的背景漸變也要旋轉(zhuǎn) 45 度。