這篇文章主要講解了“css如何設(shè)置4個(gè)邊框顏色不同”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css如何設(shè)置4個(gè)邊框顏色不同”吧！

創(chuàng)新互聯(lián)公司是專業(yè)的濱城網(wǎng)站建設(shè)公司，濱城接單;提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行濱城網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

在css中，可以利用border-top-color、border-bottom-color、border-left-color、border-right-color屬性來(lái)分別設(shè)置上邊框、下邊框、左邊框和右邊框的顏色即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css設(shè)置4個(gè)邊框不同顏色

運(yùn)行效果：

說(shuō)明：

• border-top-color屬性可以設(shè)置上邊框顏色

• border-bottom-color屬性可以設(shè)置底部邊框顏色

• border-left-color屬性可以設(shè)置左邊框顏色

• border-right-color屬性可以設(shè)置右邊框顏色

CSS顏色

在css中，顏色值可以使用顏色名、百分比、數(shù)字和十六進(jìn)制數(shù)值，共有四種寫法。

1) 使用顏色名

雖然目前已經(jīng)命名的顏色約有 184 種，但真正被各種瀏覽器支持，并且作為 CSS 規(guī)范推薦的顏色名稱只有 16 種，如下表所示。

表1：CSS 規(guī)范推薦的顏色名稱

名 稱	顏 色	名 稱	顏 色	名 稱	顏 色
black	純黑	silver	淺灰	navy	深藍(lán)
blue	淺藍(lán)	green	深綠	lime	淺綠
teal	靛青	aqua	天藍(lán)	maroon	深紅
red	大紅	purple	深紫	fuchsia	品紅
olive	褐黃	yellow	明黃	gray	深灰
white	殼白

不建議在網(wǎng)頁(yè)中使用顏色名，特別是大規(guī)模的使用，避免有些顏色名不被瀏覽器解析，或者不同瀏覽器對(duì)顏色的解釋差異。

2) 使用百分比

這是一種最常用的方法，例如：

color: rgb(100%, 100%, 100%);

這個(gè)聲明將紅、藍(lán)、綠 3 種原色都設(shè)置為最大值，結(jié)果組合顯示為白色。相反，可以設(shè)置rgb(0%, 0%, 0%)為黑色。3 個(gè)百分值相等將顯示灰色，同理哪個(gè)百分值大就偏向哪個(gè)原色。

3) 使用數(shù)值

數(shù)字范圍從 0~255，例如：

color: rgb(255, 255, 255);

上面這個(gè)聲明將顯示白色，相反，可以設(shè)置為rgb(0, 0, 0)，將顯示黑色。3 個(gè)數(shù)值相等將顯示灰色，同理哪個(gè)數(shù)值大哪個(gè)原色的比重就會(huì)加大。

4) 十六進(jìn)制顏色

這是最常用的取色方法，例如：

color: #ffffff;

其中要在十六進(jìn)制前面加一個(gè)#顏色符號(hào)。上面這個(gè)聲明將顯示白色，相反，可以設(shè)置#000000為黑色，用 RGB 來(lái)描述：

color: #RRGGBB;

從 0~255，實(shí)際上十進(jìn)制的 255 正好等于十六進(jìn)制的 FF，一個(gè)十六進(jìn)制的顏色值等于 3 組這樣的十六進(jìn)制的值，它們按順序連接在一起就等于紅、藍(lán)、綠3種原色。

感謝各位的閱讀，以上就是“css如何設(shè)置4個(gè)邊框顏色不同”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css如何設(shè)置4個(gè)邊框顏色不同這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

本文標(biāo)題：css如何設(shè)置4個(gè)邊框顏色不同
當(dāng)前鏈接：http://jinyejixie.com/article18/iiedgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、ChatGPT、虛擬主機(jī)、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)