                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /彈出層效果

登錄時(shí)一個(gè)按鈕不好看，怎么用圖片覆蓋在按鈕上，按鈕功能不影響。

老師之前的都做好了不知道登錄時(shí)一個(gè)按鈕不好看，怎么用圖片覆蓋在按鈕上，按鈕功能不影響？

哎哎萌

2015-10-29

源自：彈出層效果 3-1

關(guān)注問題我要回答

1654

操作

收起

3 回答

慕郎_蓮華回答被采納 +3 積分
2015-10-29

那你就把圖片做成按鈕

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

扎克悟空
2016-08-07

其實(shí)在正式項(xiàng)目中為了減少服務(wù)器請(qǐng)求，節(jié)約網(wǎng)站資源，能用代碼完成樣式就別用圖片。我用css3做過表單美化－－涉及了圓角/漸變/陰影/文字陰影等樣式屬性，效果如圖。

唯一需要注意的就是瀏覽器兼容性問題，不過我已經(jīng)放棄了IE～^o^

以下貼一個(gè)按鈕美化的案例：

<input?type="submit"?value="登錄"></input>

input[type='submit']{
width:?200px;
height:?100px;
/*邊框*/
border:?2px?solid?#1B47A4;
/*圓角*/
border-radius:?10px;
/*背景漸變*/
background:?-moz-linear-gradient(top,?#2564EE,?#225CD2);
background:?-webkit-linear-gradient(top,?#2564EE,?#225CD2);
/*陰影*/
box-shadow:?0?0?10px?#0F2B67,?0?3px?2px?#327CFF?inset;
font-size:?40px;
color:?#fff;
/*文本陰影*/
text-shadow:?0?0?10px?#12337A;
}

效果如圖——