CSS學習筆記六 邊框和輪廓

2021-09-25 21:08:55 字數 1329 閱讀 3200

使用border-style屬性用來定義邊框的樣式

語法:

p.solid

使用border-width 屬性為邊框指定寬度。

直接指定長度值,單位為px,em

也可以直接使用三個關鍵字:thick,medium(預設),thin

語法

p.a

p.b

border-color屬性用於設定邊框的顏色。

可以設定的顏色:

語法:

p

幾種語法:

/*第一種表達*/

p/*第二種表達,注意順序,依舊是上右底左*/

p/*第三種表達 上:solid ,右/左:dotted ,底:double*/

p/*第四種表達 上底:solid, 左右:double*/

p

你可以直接在"border"屬性中設定(按照順序):

例項:

無邊框點線邊框

虛線邊框

實線邊框

雙邊框凹槽邊框

脊狀邊框

嵌入邊框

外凸邊框

隱藏邊框

上方是點線,

右邊是虛線,

底邊是實線,

左邊是雙線

結果:

輪廓(outline)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

輪廓(outline)屬性指定元素輪廓的樣式、顏色和寬度。

其用法與邊框相同,把border替換為outline就可以了。

需要注意的地方:

輪廓並不能像邊框一樣單獨設定各邊

例項:

無輪廓點線輪廓

虛線輪廓

實線輪廓

雙輪廓凹槽輪廓

脊狀輪廓

嵌入輪廓

外凸輪廓

隱藏輪廓

上方是點線,

右邊是虛線,

底邊是實線,

左邊是雙線,

然並軟,outline並沒有像border一樣可以設定各邊

結果:

CSS邊框和外輪廓

css 邊框 css 邊框 border 可以是圍繞元素內容和內邊距的一條或多條線,對於這些線條,您可以自定義它們的樣式 寬度以及顏色。使用css邊框屬性,我們可以建立出比html中更加優秀的效果 邊框寬度 您可以通過 border width 屬性為邊框指定寬度。為邊框指定寬度有兩種方法 可以指定...

CSS學習筆記 邊框

border style屬性用來定義邊框的樣式 p.none p.dotted p.dashed p.solid p.double p.groove p.ridge p.inset p.outset p.hidden style 您可以通過 border width 屬性為邊框指定寬度。為邊框指定寬...

css3學習筆記之邊框

123 4567 891011 1213 1415 1617 1819 20 html head style t1 body divid t1 border radius 屬性允許您為元素新增圓角邊框!box shadow12 3456 78910 1112 1314 1516 1718 19 ht...