CSS盒子模型相關屬性

2022-09-10 11:48:15 字數 1931 閱讀 6965

在css屬性中,boder-style屬性用於設定邊框樣式

語法結構: border-style: 上邊[右邊 下邊 左邊];

在設定邊框樣式時既可以針對四條邊分別設定,也可以綜合設定四條邊的樣式。boder-style屬性的常用屬性值有4個,分別用於定義不同的顯示樣式,具體如下。

使用boder-style 屬性綜合設定四邊樣式時,必須按上右下左的順時針順序,省略時採用值複製的原則,即乙個值為四邊,兩個值為上下/左右,三個值為上/左右/下,四個值為上/右/下/左。

需要注意的是,由於相容性的問題,在不同的瀏覽器中的點線dotted和虛線dashed的顯示樣式可能會略有差異。

在css屬性中,boder-width屬性用於設定邊框寬度

語法結構: border-width: 上邊[右邊 下邊 左邊];

在上面的語法格式中,boder-width屬性常用取值單位為畫素px。並且同樣遵循值複製的原則,其屬性值可以設定1~4個,即乙個值為四邊,兩個值為上下/左右,三個值為上/左右/下,四個值為上/右/下/左。

在css屬性中,boder-color屬性用於設定邊框顏色

語法結構: border-color: 上邊[右邊 下邊 左邊];

在上面的語法格式中,boder-width的屬性值可以預定義的顏色值、十六進製制#rrggbb(做常用)或rgb**rgb(r,g,b),並且同樣遵循值複製的原則,其屬性值可以設定1~4個。

值得一提的是,在css3中對邊框顏色屬性進行了增強,運用該屬性可以製作漸變的絢麗的邊框效果。css在原邊框顏色屬性(boder-color)的基礎上派生了4個邊框顏色屬性。

上面的4個邊框屬性的屬性值同樣可以為預定義的顏色值、十六進製制#rrggbb(做常用)或rgb**rgb(r,g,b)。並且,每個屬性最多可以設定的邊框顏色數和其邊框相等,這時,每種邊框顏色佔1px寬度,邊框顏色從外向內渲染。例如,邊框的寬度是10px,那它最多可以設定10種邊框顏色。需要注意的是,如果邊框的寬度為10px,卻只設定了8種邊框顏色,那麼最後乙個邊框色將自動渲染剩餘的寬度。

使用boder-style、border-color、boder-width雖然可以實現豐富的邊框效果,但是這種方式書寫的**煩瑣,且不便於閱讀,為此css提供了更簡單的邊框設定方式,其基本格式如下。

boder:寬度 樣式 顏色;

上面的設定方式中,寬度、樣式、顏色的順序不分前後,可以只指定需要設定的屬性,省略的部分將取預設值(樣式不能省略)。

當每一側的邊框樣式都不相同,或者只需單獨定義某一側的邊框時,可以使用單側邊框的綜合屬性boder-top、boder-bottom、boder-left、或boder-right進行設定。

在網頁設計中,經常需要設定圓角邊框,運用css3中的boder-radius屬性可以將矩形邊框圓角化。

語法結構:boder-radius: 引數1/引數2

在上面的語法格式中,boder-radius的屬性值包含2個引數,它們的取值可以為畫素值或百分比。其中「引數1」表示圓角的水平半徑,「引數2」表示圓角的垂直半徑,兩個引數之間用「/」隔開。

需要注意的是,在使用boder-radius屬性時,如果第二個引數省略,則會預設等於第乙個引數。

值得一提的是,boder-radius屬性同樣遵循值複製的原則,其水平半徑(引數1)和垂直半徑(引數2)均可以設定1~4個引數值,用來表示四周圓角半徑的大小。

在網頁設計中,有時需要對區域整體新增乙個邊框,運用css3中的boder-image屬性可以輕鬆實現這個效果。boder-image屬性是乙個簡寫屬性,用於設定boder-image-source、boder-image-slice、border-image-width、boder-image-outset以及border-image-repeat等屬性。

語法結構:boder-image:boder-image-source boder-image-slice/boder-image-width/boder-image-outset boder-image-repeat;

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...

CSS屬性 盒子模型 border屬性

border 表示盒子的邊框 分為四個方向 top 上面 right 右面 bottom 下面 left 左面 取值方式 border top border right border bottom border left 每個邊都包含三種屬性 color 顏色 width 粗細 style 樣式 寫...

盒子模型和css屬性

2.對於盒子模型來說,通常是由 內容模組 內邊距 邊框 外邊距四部分組成,對應現實生活中的蛋糕盒,我們可以發現 蛋糕盒裡面的蛋糕就相當於內容模組,蛋糕和包裝盒之間的距離我們可以認為是內邊距,包裝盒那層薄薄的紙可以認為是邊框,蛋糕盒和其他蛋糕盒的距離可以認為是外邊距。css盒子模型 3.所以對於盒子模...