當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

[09]CSS 边框与背景 (上)

發(fā)布時間：2024/4/13 CSS 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 [09]CSS 边框与背景 (上) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

邊框的聲明有三個屬性設置，樣式表如下：

屬性值說明CSS 版本

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

//最簡單的邊框，邊框長度默認 3px，邊框顏色為黑色 div {border-style: solid; }//配置完整的邊框 div {border-style: solid;border-width: 2px;border-color: red; }

如果元素長和高均為 200px 時，四個邊框均為 2 時，元素的長高總尺寸均為 202px。

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

值說明

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

一般來說，邊框為了更加精準，還要計算元素盒子的總尺寸，使用長度值的比較多。而定義邊框線條的樣式如下樣式表：

值說明

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

如果想對四條邊中某一條邊單獨進行設置，可以使用如下樣式表：

屬性說明CSS 版本

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

如果四條變都一致，那么沒必要分寫成三句樣式，直接通過簡寫即可：

屬性值說明CSS 版本

//簡寫形式四條邊設置 div {border: 10pxsolid red; }

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

屬性值說明CSS 版本

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

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

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

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