前言
爲了減少重複造輪子，打算記錄一些CSS樣式的小技巧，後期會繼續更新……
目標
實現自適應按鈕，即：按鈕可以根據父級字體大小來調整自身的大小。
當需要修改按鈕顏色時可以直接利用css層疊覆蓋實現，使得代碼更易於維護。
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自適應按鈕</title>
<style type="text/css">
body {
font-size: 16px;
}
/*
*具有縮放效果的按鈕樣式，父級需要設置font-size
*可以通過background-color,border-color覆蓋得到不同顏色的按鈕
**/
button {
padding: .3em .8em;
border: 1px solid #446d88;
/*background: #58a linear-gradient(#77a0bb,#58a);*/
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
/*box-shadow: 0 .05em .25em gray;*/
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
}
button.ok {
background-color: #6b0;
border-color: #4B946A;
}
</style>
</head>
<body>
<button>
yes!
</button>
<br />
<br />
<button class="ok">
ok
</button>
</body>
</html>
運行效果圖
父級字體大小爲16px時：
將父級字體大小改爲26px：font-size: 26px;
按鈕會整體放大，如下：
