CSS定義邊框樣式

2021-09-05 18:22:58 字數 1112 閱讀 1874

css使用border屬性定義邊框樣式。語法:

border:line-width || line-stle || color
說明:line-width:設定物件邊框寬度。line-style:設定物件邊框樣式。color:設定物件邊框顏色。

每個邊又分別派生出三個子屬性,(border-top,border-left,border-bottom,border-right),以border-top為例。

border-top-style:樣式。border-top-color:顏色。border-top-width:寬度。

以上這些屬性中,是基礎。語法:

border-style:none | hidden | dotted | solid | double | groove | ridge | inset | outset
說明:none:無輪廓,border-color將被忽略,border-width計算值為0,除非邊框輪廓為影象,即:border-image。

hidden:隱藏邊框。dotted:點狀輪廓。dashed:虛線輪廓。solid:實線輪廓。double:雙線輪廓,兩條單線與其間隔的和等於指定的border-width值。groove:3d凹槽輪廓。ridge:3d凸槽輪廓。inset:3d凹邊輪廓。outset:3d凸邊輪廓。

注意:與margin、padding屬性相同,border及其分類子屬性設定值的說明如下:

① 如果提供全部四個引數值,將按上、右、下、左的順序作用於四邊。

② 如果只提供乙個引數,將用於全部的四邊。

③ 如果提供兩個引數,第乙個用於上、下邊框,第二個用於左、右邊框。

④ 如果提供三個引數,第乙個用於上邊框,第二個用於左、右邊框,第三個用於下邊框。

⑤ 如果border-width等於0,本屬性將失去作用。

示例:

.box
瀏覽器顯示效果:

CSS 邊框樣式

簡寫 border color width style 所有的簡寫,一經使用,所有省略的值都會採用預設值 屬性 color,width,style border 方向 屬性 簡寫 border 方向 color width style 四邊圓角 border radius px 或 單邊圓角 bor...

CSS邊框樣式

圓角邊框 border top left radius 40px 左上角 border bottom left radius 40px 左下角 border top right radius 20px 右上角 border bottom right radius 10px 右下角 border bo...

CSS 邊框樣式

本節我們來學習邊框樣式,主要包括如何設定邊框的寬度 邊框的顏色 邊框的樣式等。當我們給某個元素設定邊框時,可以分為上下左右四個邊框,既可以同時設定四個邊框的樣式,也可以分開設定四個邊框的樣式。關於邊框樣式的四個屬性 屬性描述 border width 設定邊框的寬度 border style 設定邊...