首先我們還是從邊框開始, 邊框的概念還是很好理解的, 就是盒子的邊. 但是涉及到三個(gè)屬性, 除了border-width之外, 還有border-color和border-style. 加上下左右四個(gè)方向的組合. border-width的默認(rèn)值是medium, 也就是3px, 但是border-style 默認(rèn)值是 none, 所以元素默認(rèn)不會(huì)顯示邊框. 實(shí)際場(chǎng)景中我們多數(shù)是使用實(shí)線純色邊框, 并且多數(shù)時(shí)候都會(huì)使用簡(jiǎn)寫同時(shí)設(shè)置三個(gè)屬性, 類似border: 2px solid #F1F1F1, 先后順序其實(shí)是沒有限制的, 但是出于規(guī)范和習(xí)慣, 一般都是按width style color的順序書寫. border-color的默認(rèn)值是currentcolor, 也就是取元素color屬性的值, 和元素字體的顏色一樣, 也可以設(shè)置為transparent透明邊框.

border的理解和使用一般還是挺簡(jiǎn)單的, 設(shè)計(jì)師一般也不會(huì)制作過于復(fù)雜的邊框, 照著設(shè)計(jì)定好的寬度和色值書寫即可. 需要注意的是首先, border會(huì)影響到width屬性的計(jì)算規(guī)則, 由于box-sizing的默認(rèn)值是content-box, 也就是border的寬度會(huì)加在width和height的外面, 使得元素視覺尺寸變大. 此時(shí)為了方便可以直接設(shè)置box-sizing: border-box, 避免手工計(jì)算尺寸. 另外, border-width不支持百分比值.

其他幾種border-style可以用于繪制圖形. 比如border-style: dashed可以繪制虛線. border-style: dotted可以繪制一系列方點(diǎn)或圓點(diǎn)(根據(jù)瀏覽器不同). 不過更復(fù)雜的圖形現(xiàn)在通常都是用圖片或svg實(shí)現(xiàn). 所以我們也不過度關(guān)注了.

邊框圓角的需求在設(shè)計(jì)稿中也是經(jīng)常見到, 通過border-radius屬性實(shí)現(xiàn), 也可以單獨(dú)設(shè)置四個(gè)角的圓角半徑, 如果設(shè)置的半徑超過了元素尺寸的50%, 元素將表現(xiàn)為圓形. 另外有一個(gè)細(xì)節(jié), 圓角是繪制在邊框的外邊緣上, 內(nèi)部是沒有圓角效果的.

CSS3也增加了border-image屬性, 可以在邊框上繪制圖形, 由于邊框的使用主要是出于裝飾, 邊框圖形也主要是為了更多美化界面, 如果涉及到需要復(fù)雜裝飾的場(chǎng)景, 可以考慮使用, 現(xiàn)在的兼容性應(yīng)該也可以接受了, 不過我也還沒有實(shí)際使用過, 以后有用到再補(bǔ)充吧.

邊框還有一些應(yīng)用是繪制三角形等簡(jiǎn)單圖形, 主要是利用邊框的折角和顏色, 視覺上拼出所需要的圖形, 有時(shí)會(huì)遇到, 不過現(xiàn)在也有了transform或者linear-gradient等其他實(shí)現(xiàn)方式, 如果遇到這種場(chǎng)景, 可以比較一下, 選擇最簡(jiǎn)單的方式.

然后我們看一下padding. 一般介紹盒模型時(shí)會(huì)把margin和padding對(duì)照, 稱為內(nèi)邊距, 不過我感覺, padding和border的關(guān)系更近, 可以理解為內(nèi)邊框. padding出現(xiàn)在邊框之內(nèi), content之外, 默認(rèn)值是0, 只可以設(shè)置寬度也就是長(zhǎng)度值, 沒有style和color的設(shè)置, 而且寬度的百分比全都是相對(duì)于包含塊的寬度計(jì)算. padding本身也不復(fù)雜, 同樣是由于box-sizing的問題, 需要注意對(duì)寬度計(jì)算的影響. 為了簡(jiǎn)單, 我的一般原則是不用padding, 如果偶爾用到, 記得考慮box-sizing.

背景

之后我們看background, 如果說定位會(huì)在頁(yè)面之上創(chuàng)建層, background就是在頁(yè)面之下創(chuàng)建層. 最基礎(chǔ)的是background-color設(shè)置背景色, 默認(rèn)是transparent, 透明背景, 也可以設(shè)置background-image, 背景圖片, 同時(shí)設(shè)置的話, 圖片會(huì)顯示在背景顏色之上. CSS3之后, 背景圖片可以設(shè)置多個(gè), 用逗號(hào)隔開, 但是背景色依然只有一個(gè), 要實(shí)現(xiàn)多個(gè)背景色, 可以使用gradient, 但是gradient的類型是image, 所以也要通過background-image來設(shè)置.

由于在頁(yè)面上顯示圖片是一種常見的需求, 使用img標(biāo)簽顯示圖片需要更改html, 所以background-image就成為在CSS中設(shè)置圖片的主要方式.(偽元素也可以用來顯示圖片, 但是樣式不好控制, 基本不會(huì)用到) background的大部分屬性都是在設(shè)置圖片的顯示方式. 首先是圖片的位置和大小, 由background-position和background-size確定, background-position的默認(rèn)值是0, 也就是從左上角開始擺放, background-size默認(rèn)是auto, 按圖片原始尺寸顯示. 當(dāng)然由于是背景圖片, 不可能超過所在元素的范圍顯示, 所以有一個(gè)屬性background-clip可以設(shè)置背景顯示的范圍, 默認(rèn)是border-box, 也就是背景不超過邊框的外邊界. 也可以設(shè)置為padding-box或content-box, 比較好理解. 但是還有一個(gè)background-origin屬性, 規(guī)定了背景計(jì)算參照的起始位置, 取值也是這三個(gè)box, 默認(rèn)是padding-box, 其實(shí)他們都是為了確定圖片顯示的計(jì)算方式, 實(shí)際效果一試便知, 而且用到的機(jī)會(huì)也不是很多, 除非有復(fù)雜的背景定位需求.

還有兩個(gè)background屬性, background-repeat和background-attachment, 是網(wǎng)頁(yè)技術(shù)早期保留下來的, 現(xiàn)代基本很少會(huì)用到. 特別是background-repeat默認(rèn)是repeat非常心煩, 基本每次都需要重置, 屬性名又長(zhǎng), 所以我在全局設(shè)置了background-repeat: no-repeat; background-size: 100%; background-position: center;, 因?yàn)榇蟛糠謺r(shí)候, 背景圖片都是和元素等尺寸居中顯示的.

裝飾

如果把padding理解為內(nèi)邊框, 那么outline就可以理解為外邊框. outline的語(yǔ)法和border類似, 但是不能單獨(dú)設(shè)置每條邊的樣式, 另外, outline不能表現(xiàn)出元素的圓角, 由于繪制在margin區(qū)域, 也不能用于擴(kuò)大點(diǎn)擊區(qū)域, 但是其不影響布局的特性, 使得他用來繪制蒙層比較合適, 尤其是需要鏤空效果的蒙層, 可以通過設(shè)置一個(gè)寬度很大的outline實(shí)現(xiàn). 但是現(xiàn)在outline還沒法跟隨元素的圓角, 所以在圓角元素上需要用box-shadow制作鏤空蒙層. CSS3增加了一個(gè)outline-offset屬性, 可以改變outline繪制的位置, 如果遇到復(fù)雜的多重邊框, 可以嘗試用一下.

然后我們就說到了box-shadow. 從本意上來說, 這個(gè)屬性的作用是給元素添加陰影, 但是這個(gè)屬性設(shè)計(jì)的非常強(qiáng)大, 甚至可以生成任意圖形, 例如shadow-image. 由于語(yǔ)法太多, 實(shí)際應(yīng)用少, 我們就不過多介紹了, 可以查閱MDN文檔, 也有相應(yīng)的可視化生成工具生成box-shadow代碼. 我們上面說到的用box-shadow生成鏤空蒙層, 用到的是其中一種比較完整的寫法box-shadow: 0 0 0 100vh rgba(0,0,0,.7);, box-shadow生成的陰影會(huì)跟隨元素的圓角效果, 但是如果陰影尺寸過大, 陰影外邊緣的圓角半徑可能和元素自身的圓角半徑相差較大, 如果要實(shí)現(xiàn)內(nèi)外同等半徑的投影, 還是需要嵌套多級(jí)元素分別設(shè)置圓角.