html+css3自定義button樣式
阿新 • • 發佈：2018-12-12
原生的按鈕有點醜，為此需要改裝一下樣式，達到適應頁面或者美化的作用，下面的連線是用input做按鈕和button做按鈕的區別，有興趣的可以看看。
https://blog.csdn.net/u010458114/article/details/79371304
先上效果圖：
html+CSS實現如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按鈕</title> <style> .yongyin { width:100px; text-align:center; line-height:100%; padding:0.3em; font:16px Arial,sans-serif bold; font-style:normal; text-decoration:none; margin:2px; vertical-align:text-bottom; zoom:1; outline:none; font-size-adjust:none; font-stretch:normal; border-radius:50px; box-shadow:0px 1px 2px rgba(0,0,0,0.2); text-shadow:0px 1px 1px rgba(0,0,0,0.3); color:#fefee9; border:0.2px solid #2299ff; background-repeat:repeat; background-size:auto; background-origin:padding-box; background-clip:padding-box; background-color:#3399ff; background: linear-gradient(to bottom, #eeeff9 0%,#3399ff 100%); } .yongyin:hover { background: #268DFF; } </style> </head> <body> <div style="margin-top:10px"> <button type="button" class="yongyin" onclick="alert('ceshi-custom')" style="width:100px; height:30px;">樣式按鈕</button> </div> </body> </html>
這裡的樣式也不是很複雜，就是圓角、去掉原來的邊框、做效果過度等。
最後記錄一個問題：字串相加問題
var a = "1",b = 9 ;
alert(a+b); // 這個得到的是19
alert(eval(a)+b); //這個得到的是10