精簡CSS
-
代碼如何精簡？
- 從簡單例子彈起，最簡單的一個btn
.btn{ padding:4px 10px; border:1px solid #ddd; background:#59a linear-gradient(#77a0bb,#58a); broder-radius:5px; box-shadow:0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; }- 如果我們現在想改字體大小？面臨的問題是什么？
- 可能字體變大后，line-height也會變化，看起來并不是等比放大或縮小
- 那么我們可以用比例來控制
line-height:1.5 - 如果我們想更好的擴展該如何做，那就要搬出em或者rem了，我們可以這么寫
padding: .3em .8em; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: .2em; box-shadow: 0 .05em .25em gray; color: white; text-shadow: 0 -.05em .05em #335166; font-size: 125%; line-height: 1.5; -
合理使用簡寫
- background和background-color的區別？其實我們上面已經看到了background-color屬性可能會被background-image屬性覆蓋
-
背景與邊框小知識，默認情況下，border的顏色是浮在background之上的
盡管看起來并不像那么回事，但我們的邊框其實是存在的。默認情況下，
背景會延伸到邊框所在的區域下層。這一點很容易驗證，給一個有背景的元
素應用一道老土的虛線邊框，就可以看出來（參見圖 2-3）。即使你使用的是
不透明的實色邊框，這個事實也不會有任何改變。只不過在上面的例子中，
這個特性完全打破了我們的設計意圖。我們所做的事情并沒有讓 body 的背景
從半透明白色邊框處透上來，而是在半透明白色邊框處透出了這個容器自己
的純白實色背景，這實際上得到的效果跟純白實色的邊框看起來完全一樣。
在 CSS 2.1 中，這就是背景的工作原理。我們只能接受它并且向前看。
謝天謝地，從背景與邊框（第三版）（http://w3.org/TR/css3-background）開
始，我們可以通過 background-clip 屬性來調整上述默認行為所帶來的不
便。這個屬性的初始值是 border-box，意味著背景會被元素的 border box
（邊框的外沿框）裁切掉。如果不希望背景侵入邊框所在的范圍，我們要做
的就是把它的值設為 padding-box，這樣瀏覽器就會用內邊距的外沿來把背
景裁切掉。默寫三遍，background-clip:border-box/padding-box
demo -
多邊框，我能想到的只有多個元素了，書中采用了 box-shadow,簡直 666啊
回憶一下box-shadow:x y 模糊 擴張半徑background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;box-shadow 是層層疊加的，第一層投影位于最頂
層，依次類推。因此，你需要按此規律調整擴張半徑。比如說，在前面的代
碼中，我們想在外圈再加一道 5px 的外框，那就需要指定擴張半徑的值為15px（10px+5px）。
box-shadow 使用技巧2，如何設置單陰影，第四個參數表示擴張半徑，如果設置單負數，表示橫向或者縱向壓縮多少
最終的解決方案來自 box-shadow 鮮為人知的第四個長度參數。它排在
模糊半徑參數之后，稱作擴張半徑。這個參數會根據你指定的值去擴大或
（當指定負值時）縮小投影的尺寸。舉例來說，一個 -5px 的擴張半徑會把投
影的寬度和高度各減少 10px（即每邊各 5px）。
從邏輯上來說，如果我們應用一個負的擴張半徑，而它的值剛好等于模
糊半徑，那么投影的尺寸就會與投影所屬元素的尺寸完全一致。除非用偏移
量（前兩個長度參數）來移動它，我們將完全看不見任何投影。因此，如果
給投影應用一個正的垂直偏移量，我們就會在元素的底部看到一道投影，而
元素的另外三側是沒有投影的，這正是我們一直苦苦追尋的效果
