對(duì)CSS3盒模型邊框應(yīng)用的研究

摘要：邊框是CSS盒模型的重要屬性之一，用好邊框不僅可以起到增強(qiáng)頁(yè)面視覺(jué)效果的作用，同時(shí)也可以提高外部資源的利用效率，降低頁(yè)面加載的負(fù)荷。隨著自適應(yīng)布局頁(yè)面的流行，邊框的重要作用更加凸顯出來(lái)，該文將重點(diǎn)研究邊框的應(yīng)用技巧。

關(guān)鍵詞：邊框；盒模型；圖片邊框

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）36-0115-02

1 背景

盒模型是頁(yè)面布局中的基礎(chǔ)思想，通過(guò)對(duì)網(wǎng)頁(yè)元素的盒屬性進(jìn)行設(shè)置而提升頁(yè)面的用戶(hù)體驗(yàn)。邊框作為盒模型中的重要組成部分，被網(wǎng)頁(yè)制作人員大量的使用。然而早期的邊框?qū)傩裕峁┑倪吙驑邮竭^(guò)少，只能進(jìn)行一些簡(jiǎn)單的應(yīng)用，對(duì)于一些復(fù)雜的邊框，就束手無(wú)策，甚至只能使用大量的背景圖片來(lái)替代，這不僅增加了頁(yè)面的體積，不符合移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)的要求，同時(shí)也增加了頁(yè)面加載的符合，降低了資源的利用效率。

考慮到邊框的特點(diǎn)，CSS3加強(qiáng)了邊框的功能，提供了大量新的實(shí)用技術(shù)。盡管盒模型不斷的改進(jìn)和增加新的內(nèi)容，但不少網(wǎng)頁(yè)人對(duì)新技術(shù)的使用并不積極，主要原因有以下幾點(diǎn)：

1）新技術(shù)缺乏一定向下的兼容性，給技術(shù)人員造成一定負(fù)擔(dān)；

2）對(duì)熟悉的技術(shù)形成依賴(lài)，缺乏在技術(shù)上求新的動(dòng)力

3）技術(shù)標(biāo)準(zhǔn)還沒(méi)有最終成型，技術(shù)人員缺乏學(xué)習(xí)的動(dòng)力

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，新技術(shù)的流行是不可阻擋的，本文針對(duì)盒模型的邊框?qū)傩宰鲆粋€(gè)詳細(xì)的技術(shù)分析。

2 邊框的屬性

在CSS中，與邊框有關(guān)的屬性都以border開(kāi)頭，依據(jù)盒模型的特點(diǎn)，邊框分成了4個(gè)方向，可分別獨(dú)立設(shè)置，但每個(gè)方向的邊框都具備相同的屬性。因而在此處，只針對(duì)邊框的整體進(jìn)行分析。

2.1 邊框的寬度（border-width）

邊框?qū)挾戎饕蒪order-width進(jìn)行設(shè)置，通常默認(rèn)為3px，可以是絕對(duì)值px，也可以使用相對(duì)單位來(lái)設(shè)置。依據(jù)CSS屬性縮寫(xiě)的規(guī)則，凡是帶方向的屬性，都可以按順時(shí)針?lè)较?，以上作為起點(diǎn)，一次性進(jìn)行設(shè)置，例如border-width：1px 2px 3px 4px，分別為上1px，右2px，下3px，左4px。CSS3增加了一個(gè)對(duì)邊框?qū)挾仍O(shè)置的屬性border-image-width，此屬性為boder-image配套屬性，也可用border-width替換。

2.2 邊框樣式（border-style）

邊框樣式是邊框顯示中的必要屬性，需要顯示聲明。邊框樣式主要分為無(wú)輪廓和有輪廓樣式，有輪廓樣式有：hidden（隱藏邊框），dotted（點(diǎn)狀輪廓），dashed（虛線輪廓），solid（實(shí)線輪廓）double： （雙線輪廓）， outset（3D凸邊輪廓） ，ridge（3D凸槽輪廓）， groove（3D凹槽輪廓），inset（3D凹邊輪廓）。邊框樣式同樣可以針對(duì)4個(gè)方向的邊框進(jìn)行獨(dú)立的設(shè)置，例如：border-style：dotted dashed solid groove。

2.3 邊框顏色（border-color）

邊框顏色的使用相對(duì)比較簡(jiǎn)單，但許多人通常只會(huì)設(shè)置純色，殊不知邊框也可以設(shè)置透明度，只需使用CSS3增加的新的色彩模式rgba即可。例如border-color：rgba（255，0，0，.5），將邊框設(shè)置為半透明的紅色。

2.4 邊框圓角（border-radius）

早期的網(wǎng)頁(yè)制作人員，深知圓角之痛。CSS2時(shí)代，由于沒(méi)有提供有效的解決圓角的方案，所以大多時(shí)候都使用圓角的圖片作為背景來(lái)實(shí)現(xiàn)圓角效果。CSS3彌補(bǔ)了邊框這一功能。border-radius正是針對(duì)圓角進(jìn)行設(shè)置，每個(gè)角以關(guān)聯(lián)的兩個(gè)邊劃分圓角的弧度，如：border-radius：5px 。

2.5 圖片邊框（border-image）

圖片邊框可以說(shuō)是CSS3對(duì)邊框增加的一項(xiàng)十分強(qiáng)大的功能。顧名思義，就是用圖片代替線條作為邊框使用，圖片邊框利用九宮格將圖片劃分，并按照分割對(duì)位應(yīng)用，確保圖片邊框在拉伸中不變形，以適應(yīng)各種比例的盒元素。具體使用方法將在后面做詳細(xì)介紹。

3 邊框技術(shù)難點(diǎn)詳解

邊框?qū)傩灾?，新增的圓角邊框與圖片邊框具有一定技巧性，下面詳細(xì)講解一下這2個(gè)屬性的使用。

3.1 圓角邊框的難點(diǎn)應(yīng)用

圓角邊框總共分為4個(gè)角，每個(gè)角對(duì)應(yīng)2個(gè)邊，例如：border-radius：15px 10px，分別從水平和垂直方向截取15px和10px的長(zhǎng)度構(gòu)成圓角的弧度，當(dāng)水平和垂直截取的長(zhǎng)度剛好等于邊長(zhǎng)的一半，則會(huì)形成一個(gè)橢圓形，如果此時(shí)為正方形，則會(huì)形成一個(gè)正圓形，如圖1所示：

3.2 圖片邊框的難點(diǎn)應(yīng)用

圖片邊框是css3增加的一項(xiàng)實(shí)用性非常強(qiáng)的功能，可以通過(guò)對(duì)4個(gè)角的保留，達(dá)到伸縮不變形的效果，其基本思想是利用九宮格將圖片劃分成9個(gè)區(qū)域，如圖2所示：

從圖2可以看出，1，2，3，4四個(gè)區(qū)域分別為劃出的不可伸縮的角，5，6，7，8四個(gè)區(qū)域都為直線，可以任意伸縮而不產(chǎn)生變形，而區(qū)域9正好是內(nèi)容所在的位置，所以默認(rèn)為透明，除非顯示的設(shè)置參數(shù)來(lái)實(shí)現(xiàn)改變。

最后，關(guān)鍵的問(wèn)題就落具體如何實(shí)現(xiàn)劃分九宮格的4條線上了，這里只需通過(guò)設(shè)置屬性border-image-slice即可實(shí)現(xiàn)，共有4個(gè)值，分別按照?qǐng)D2中a（上），b（右），c（下），d（左）四條線的順序來(lái)劃分圖片，產(chǎn)生距離上右下左四個(gè)邊的距離，如border-image-slice：10px 20px 30px 40px表示距離上邊框10px，右邊框20px，下邊框30px，左邊框40px處分別按照abcd的順序劃出九個(gè)區(qū)域。最后，設(shè)置適當(dāng)?shù)倪吙驅(qū)挾龋涂梢詫?shí)現(xiàn)在不同大小的盒子上共用一張圖片作為邊框的目的。

4 結(jié)束語(yǔ)

隨著W3C標(biāo)準(zhǔn)在各個(gè)瀏覽器下的逐步兼容統(tǒng)一，不僅邊框的作用將會(huì)越來(lái)越強(qiáng)大，更多強(qiáng)大的技術(shù)會(huì)逐步流行起來(lái)，成為網(wǎng)頁(yè)制作的一把利器！

參考文獻(xiàn)：

[1] 鄭偉. 高職院校圖形類(lèi)專(zhuān)業(yè)實(shí)踐教學(xué)研究[J]. 科技資訊， 2010（12）： 248.

[2] 鄭偉. 關(guān)于《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程標(biāo)準(zhǔn)化建設(shè)實(shí)施方案的研究[J]. 電腦知識(shí)與技術(shù)， 2016， 7（12）： 158-159.

[3] 鄭偉. 高職院校圖形類(lèi)專(zhuān)業(yè)《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程建設(shè)改革的探討[J]. 藝術(shù)科技， 2013， 26（3）： 283.