首先我們還是從邊框開始, 邊框的概念還是很好理解的, 就是盒子的邊. 但是涉及到三個屬性, 除了border-width之外, 還有border-color和border-style. 加上下左右四個方向的組合. border-width的默認值是medium, 也就是3px, 但是border-style 默認值是 none, 所以元素默認不會顯示邊框. 實際場景中我們多數是使用實線純色邊框, 并且多數時候都會使用簡寫同時設置三個屬性, 類似border: 2px solid #F1F1F1, 先后順序其實是沒有限制的, 但是出于規范和習慣, 一般都是按width style color的順序書寫. border-color的默認值是currentcolor, 也就是取元素color屬性的值, 和元素字體的顏色一樣, 也可以設置為transparent透明邊框.
border的理解和使用一般還是挺簡單的, 設計師一般也不會制作過于復雜的邊框, 照著設計定好的寬度和色值書寫即可. 需要注意的是首先, border會影響到width屬性的計算規則, 由于box-sizing的默認值是content-box, 也就是border的寬度會加在width和height的外面, 使得元素視覺尺寸變大. 此時為了方便可以直接設置box-sizing: border-box, 避免手工計算尺寸. 另外, border-width不支持百分比值.
其他幾種border-style可以用于繪制圖形. 比如border-style: dashed可以繪制虛線. border-style: dotted可以繪制一系列方點或圓點(根據瀏覽器不同). 不過更復雜的圖形現在通常都是用圖片或svg實現. 所以我們也不過度關注了.
邊框圓角的需求在設計稿中也是經常見到, 通過border-radius屬性實現, 也可以單獨設置四個角的圓角半徑, 如果設置的半徑超過了元素尺寸的50%, 元素將表現為圓形. 另外有一個細節, 圓角是繪制在邊框的外邊緣上, 內部是沒有圓角效果的.
CSS3也增加了border-image屬性, 可以在邊框上繪制圖形, 由于邊框的使用主要是出于裝飾, 邊框圖形也主要是為了更多美化界面, 如果涉及到需要復雜裝飾的場景, 可以考慮使用, 現在的兼容性應該也可以接受了, 不過我也還沒有實際使用過, 以后有用到再補充吧.
邊框還有一些應用是繪制三角形等簡單圖形, 主要是利用邊框的折角和顏色, 視覺上拼出所需要的圖形, 有時會遇到, 不過現在也有了transform或者linear-gradient等其他實現方式, 如果遇到這種場景, 可以比較一下, 選擇最簡單的方式.
然后我們看一下padding. 一般介紹盒模型時會把margin和padding對照, 稱為內邊距, 不過我感覺, padding和border的關系更近, 可以理解為內邊框. padding出現在邊框之內, content之外, 默認值是0, 只可以設置寬度也就是長度值, 沒有style和color的設置, 而且寬度的百分比全都是相對于包含塊的寬度計算. padding本身也不復雜, 同樣是由于box-sizing的問題, 需要注意對寬度計算的影響. 為了簡單, 我的一般原則是不用padding, 如果偶爾用到, 記得考慮box-sizing.
背景
之后我們看background, 如果說定位會在頁面之上創建層, background就是在頁面之下創建層. 最基礎的是background-color設置背景色, 默認是transparent, 透明背景, 也可以設置background-image, 背景圖片, 同時設置的話, 圖片會顯示在背景顏色之上. CSS3之后, 背景圖片可以設置多個, 用逗號隔開, 但是背景色依然只有一個, 要實現多個背景色, 可以使用gradient, 但是gradient的類型是image, 所以也要通過background-image來設置.
由于在頁面上顯示圖片是一種常見的需求, 使用img標簽顯示圖片需要更改html, 所以background-image就成為在CSS中設置圖片的主要方式.(偽元素也可以用來顯示圖片, 但是樣式不好控制, 基本不會用到) background的大部分屬性都是在設置圖片的顯示方式. 首先是圖片的位置和大小, 由background-position和background-size確定, background-position的默認值是0, 也就是從左上角開始擺放, background-size默認是auto, 按圖片原始尺寸顯示. 當然由于是背景圖片, 不可能超過所在元素的范圍顯示, 所以有一個屬性background-clip可以設置背景顯示的范圍, 默認是border-box, 也就是背景不超過邊框的外邊界. 也可以設置為padding-box或content-box, 比較好理解. 但是還有一個background-origin屬性, 規定了背景計算參照的起始位置, 取值也是這三個box, 默認是padding-box, 其實他們都是為了確定圖片顯示的計算方式, 實際效果一試便知, 而且用到的機會也不是很多, 除非有復雜的背景定位需求.
還有兩個background屬性, background-repeat和background-attachment, 是網頁技術早期保留下來的, 現代基本很少會用到. 特別是background-repeat默認是repeat非常心煩, 基本每次都需要重置, 屬性名又長, 所以我在全局設置了background-repeat: no-repeat; background-size: 100%; background-position: center;, 因為大部分時候, 背景圖片都是和元素等尺寸居中顯示的.
裝飾
如果把padding理解為內邊框, 那么outline就可以理解為外邊框. outline的語法和border類似, 但是不能單獨設置每條邊的樣式, 另外, outline不能表現出元素的圓角, 由于繪制在margin區域, 也不能用于擴大點擊區域, 但是其不影響布局的特性, 使得他用來繪制蒙層比較合適, 尤其是需要鏤空效果的蒙層, 可以通過設置一個寬度很大的outline實現. 但是現在outline還沒法跟隨元素的圓角, 所以在圓角元素上需要用box-shadow制作鏤空蒙層. CSS3增加了一個outline-offset屬性, 可以改變outline繪制的位置, 如果遇到復雜的多重邊框, 可以嘗試用一下.
然后我們就說到了box-shadow. 從本意上來說, 這個屬性的作用是給元素添加陰影, 但是這個屬性設計的非常強大, 甚至可以生成任意圖形, 例如shadow-image. 由于語法太多, 實際應用少, 我們就不過多介紹了, 可以查閱MDN文檔, 也有相應的可視化生成工具生成box-shadow代碼. 我們上面說到的用box-shadow生成鏤空蒙層, 用到的是其中一種比較完整的寫法box-shadow: 0 0 0 100vh rgba(0,0,0,.7);, box-shadow生成的陰影會跟隨元素的圓角效果, 但是如果陰影尺寸過大, 陰影外邊緣的圓角半徑可能和元素自身的圓角半徑相差較大, 如果要實現內外同等半徑的投影, 還是需要嵌套多級元素分別設置圓角.
