一．聲明邊框

HTML5 中 CSS 邊框和背景，通過(guò)邊框和背景的樣式設(shè)置，給元素增加更豐富的外觀。

邊框的聲明有三個(gè)屬性設(shè)置，樣式表如下：

屬性值說(shuō)明CSS 版本

border-width	長(zhǎng)度值	設(shè)置邊框的寬度，可選	1
border-style	樣式名稱	設(shè)置邊框的樣式，必選	1
border-color	顏色值	設(shè)置邊框的顏色，可選	1

這三個(gè)屬性值，只有border-style 是必須聲明，才可以出現(xiàn)邊框。而其他兩個(gè)屬性會(huì)出現(xiàn)默認(rèn)值。

//最簡(jiǎn)單的邊框，邊框長(zhǎng)度默認(rèn) 3px，邊框顏色為黑色 div {border-style: solid; }//配置完整的邊框 div {border-style: solid;border-width: 2px;border-color: red; }

如果元素長(zhǎng)和高均為 200px 時(shí)，四個(gè)邊框均為 2 時(shí)，元素的長(zhǎng)高總尺寸均為 202px。

二．邊框樣式

邊框的樣式主要有三種，分別是邊框長(zhǎng)度取值、邊框的顏色和邊框的線條類型。顏色是通用的顏色代碼，和所有其他顏色取值一下。而長(zhǎng)度和線條類型，邊框有自己獨(dú)到的部分。
邊框?qū)挾热≈当砣缦?#xff1a;

值說(shuō)明

長(zhǎng)度值	CSS 長(zhǎng)度值：比如 px、em 等
百分?jǐn)?shù)	直接設(shè)置百分?jǐn)?shù)：1、2、3 等
thin	使用長(zhǎng)度名稱的預(yù)設(shè)寬度。這三個(gè)值的具體意義由瀏覽器來(lái)定義，從小到大依次增大。
medium	~
thick	~

一般來(lái)說(shuō)，邊框?yàn)榱烁泳珳?zhǔn)，還要計(jì)算元素盒子的總尺寸，使用長(zhǎng)度值的比較多。而定義邊框線條的樣式如下樣式表：

值說(shuō)明

none	沒(méi)有邊框
dashed	破折線邊框
dotted	圓點(diǎn)線邊框
groove	槽線邊框
inset	使元素內(nèi)容具有內(nèi)嵌效果的邊框
outset	使元素內(nèi)容具有外凸效果的邊框
ridge	脊線邊框
solid	實(shí)線邊框

//solid 實(shí)線使用頻率最高 div {border-style: solid;border-width: 10px;border-color: red; }

如果想對(duì)四條邊中某一條邊單獨(dú)進(jìn)行設(shè)置，可以使用如下樣式表：

屬性說(shuō)明CSS 版本

border-top-width	定義頂端	1
border-top-style	~	~
border-top-color	~	~
border-bottom-width	定義底部	1
border-bottom-style	~	~
border-bottom-color	~	~
border-left-width	定義左側(cè)	1
border-left-style	~	~
border-left-color	~	~
border-right-width	定義右邊	1
border-right-style	~
border-right-color	~

//只設(shè)置頂端 div {border-top-style: solid;border-top-width: 10px;border-top-color: red; }

如果四條變都一致，那么沒(méi)必要分寫成三句樣式，直接通過(guò)簡(jiǎn)寫即可：

屬性值說(shuō)明CSS 版本

border	<寬度> <樣式> <顏色>	設(shè)置四條邊的邊框	1
border-top	~	只設(shè)置上邊框	~
border-bottom	~	只設(shè)置下邊框	~
border-left	~	只設(shè)置左邊框	~
border-right	~	只設(shè)置右邊框	~

//簡(jiǎn)寫形式四條邊設(shè)置 div {border: 10pxsolid red; }

三．圓角邊框

CSS3 提供了一個(gè)非常實(shí)用的圓角邊框的設(shè)置。使用 border-radius 屬性，就可以達(dá)到這種效果，樣式表如下：

屬性值說(shuō)明CSS 版本

border-radius	長(zhǎng)度值或百分?jǐn)?shù)	四條邊角	3
border-top-left-radius	長(zhǎng)度值或百分?jǐn)?shù)	左上邊角	3
border-top-right-radius	長(zhǎng)度值或百分?jǐn)?shù)	右上邊角	3
border-bottom-left-radius	長(zhǎng)度值或百分?jǐn)?shù)	左下邊角	3
border-bottom-right-radius	長(zhǎng)度值或百分?jǐn)?shù)	右下邊角	3

//設(shè)置圓角矩形 div {border: 10pxsolid red;border-radius: 10px; }//四條邊分別設(shè)置 div {border: 10pxsolid red;border-radius: 10px 20px 30px 40px; }

轉(zhuǎn)載于:https://www.cnblogs.com/pengtdy/p/8306298.html

總結(jié)

以上是生活随笔為你收集整理的[09]CSS 边框与背景 (上)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。