CSS 盒子模型邊框
學(xué)習(xí)過(guò) HTML 的同學(xué)都知道,在 HTML 中,我們常使用表格來(lái)創(chuàng)建周?chē)倪吙?但是通過(guò)使用 CSS 邊框?qū)傩?我們可以創(chuàng)建出效果出色的邊框,并且可以應(yīng)用于任何元素.
每個(gè) border 屬性我們可以設(shè)置寬度,樣式,以及顏色.下面我們就看看如何通過(guò) border 屬性來(lái)設(shè)置邊框?qū)挾?以及顏色:
CSS 沒(méi)有定義 3 個(gè)關(guān)鍵字的具體寬度，所以一個(gè)用戶(hù)代理可能把 thin 、medium 和 thick 分別設(shè)置為等于 5px、3px 和 2px，而另一個(gè)用戶(hù)代理則分別設(shè)置為 3px、2px 和 1px。
可以通過(guò)如下的內(nèi)容
td {border-style: solid; border-width: 15px 5px 15px 5px;}同樣,這里我們也可以設(shè)置單邊邊框的寬度,
border-top-width border-right-width border-bottom-width border-left-width
下面我們?cè)?CSS 文件中加入
border-style: dashed; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px;
下面是效果截圖:
說(shuō)完寬度,我們?cè)賮?lái)看看顏色,設(shè)置邊框顏色非常簡(jiǎn)單。CSS 使用一個(gè)簡(jiǎn)單的 border-color 屬性，它一次可以接受最多 4 個(gè)顏色值,分別是邊框的四邊(具體順序自己可以試試)?？梢允褂萌魏晤?lèi)型的顏色值，例如可以是命名顏色，也可以是十六進(jìn)制和 RGB 值：
在 CSS 文檔中添加以下內(nèi)容:
border-color: blue rgb(25%,35%,45%) #909090 red;
下面就是效果截圖:
同樣可以使用屬性控制各個(gè)邊框的顏色,以達(dá)到相同的效果: border-top-color border-right-color border-bottom-color border-left-color
