作者|李娜
*本文為「Java聯(lián)盟」原創(chuàng)內(nèi)容，轉(zhuǎn)載無(wú)需授權(quán)，請(qǐng)保留署名來(lái)源。
上一篇文章讓我們對(duì)盒子模型以及css樣式有了初步的認(rèn)識(shí)豺瘤，那么這一篇文章，我們就來(lái)詳細(xì)的了解盒子模型的邊框（ border ）听诸。
元素的邊框 ( border ) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線坐求。
CSS border 屬性允許你規(guī)定元素邊框的寬度、樣式和顏色晌梨。
類(lèi)似這樣border：1px solid red桥嗤；其中px是寬度的的單位，1px 代表一個(gè)像素單位仔蝌，想要增加邊框的寬度泛领，增加前面的數(shù)字就好了。
樣式是邊框最重要的一個(gè)屬性敛惊，這不是因?yàn)闃邮娇刂浦吙虻娘@示（當(dāng)然渊鞋，樣式確實(shí)控制著邊框的顯示），而是因?yàn)槿绻麤](méi)有樣式瞧挤，就根本沒(méi)有邊框锡宋。
這里給大家列出一些樣式小伙伴們可以自己試著寫(xiě)一下感受一下效果。
none定義無(wú)邊框皿伺。
hidden與 "none" 相同员辩。不過(guò)應(yīng)用于表時(shí)除外，對(duì)于表鸵鸥，hidden 用于解決邊框沖突奠滑。
dotted定義點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線妒穴。
dashed定義虛線宋税。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。
solid定義實(shí)線讼油。
double定義雙線杰赛。雙線的寬度等于 border-width 的值。
groove定義 3D 凹槽邊框矮台。其效果取決于 border-color 的值乏屯。
ridge定義 3D 壟狀邊框。其效果取決于 border-color 的值瘦赫。
inset定義 3D inset 邊框辰晕。其效果取決于 border-color 的值。
outset定義 3D outset 邊框确虱。其效果取決于 border-color 的值含友。
inherit規(guī)定應(yīng)該從父元素繼承邊框樣式。
這是部分樣式的實(shí)現(xiàn)代碼（這種選擇方式稱(chēng)之為類(lèi)選擇器，我在之后的文章中介紹給大家）：
效果圖如下
除了樣式（風(fēng)格）還有顏色：CSS 顏色使用組合了紅綠藍(lán)顏色值 (RGB) 的十六進(jìn)制 (hex) 表示法進(jìn)行定義窘问。對(duì)光源進(jìn)行設(shè)置的最低值可以是 0（十六進(jìn)制 00）辆童。最高值是 255（十六進(jìn)制 FF）。
顏色顏色 HEX顏色 RGB
#000000rgb(0,0,0)
#FF0000rgb(255,0,0)
#00FF00rgb(0,255,0)
#0000FFrgb(0,0,255)
#FFFF00rgb(255,255,0)
#00FFFFrgb(0,255,255)
#FF00FFrgb(255,0,255)
#C0C0C0rgb(192,192,192)
#FFFFFFrgb(255,255,255)
以及一些標(biāo)準(zhǔn)的代表顏色的單詞：像 red 紅色 blue 藍(lán)色等等惠赫。
其中這種1顏色的搭配有一千六百萬(wàn)種組合（256*256*256）所以我們不用擔(dān)心顏色會(huì)不夠用把鉴。
那么既然我們已經(jīng)知道了邊框的要素和使用就來(lái)試試吧!
我們可以分別為上下左右四條邊框設(shè)計(jì)樣式：
border-top:1px solid red; /*上邊框*/
border-right:1px solid red; /*右邊框*/
border-bottom:1px solid red; /*下邊框*/
border-left:1px solid red; /*左邊框*/
甚至是點(diǎn)一邊框的單一屬性。
border-top-color: red;/*上邊框顏色*
border-right-style:solid ;/*右邊框風(fēng)格*/
border-bottom-width:70px;/*下邊框?qū)挾?/
border-left-color/solid/width
源碼示例
生成效果
小伙伴們快來(lái)動(dòng)手試試吧汉形！做出自己喜歡的效果Ｖ侥鳌！概疆！
當(dāng)然上面的美觀有待提升逗威，做成這個(gè)樣子，但是很生動(dòng)形象安砑健凯旭！當(dāng)然有什么問(wèn)題或者需要李娜我給大家分享講解的地方，可以在留言區(qū)留言告訴我使套，整理后會(huì)在公眾號(hào)里面分享講解哦罐呼！
