CSS 邊框(Border)

介紹 CSS元素邊框(Border)屬性設定 邊界內外四週留邊寬度、顏色、屬性值應用

若您忘了內外邊框的位置,請先參閱「盒子模型」(Box Model)章節圖示


border屬性語法:

簡化寫法

border:#0000FF 5px solid; /*是: 上 下 左 右 四邊都同數值時的簡化寫法*/

四個邊可獨立寫法

border-style:1px solid; /*(邊框樣式)

border-width:10px;/*(邊框寬度)*/

border-color:red;/* (邊框色彩) */

border-top:, border-left:, border-bottom:, border-right:;/* ( 上 下 左 右 四個邊界各自指定屬性值) */


border

元素{屬性: 值 }說明
p {border-style:solid; }

實線

p {border-style:dotted; }

點線

p {border-style:dashed; }

虛線

p {border-style:double; }

雙線

p {border-style:groove;}

凹線

p {border-style:ridge;}

凸線

p {{border-style:outset;}

浮出線

p {border-style:inset;}

嵌入線

p {border-bottom-style:dotted;}

單邊(底)設定虛線


範例::CSS border(邊框)屬性的檢視

範例觀測重點 :

動手實驗一下 : 加入顏色或其它 屬性:值改變看看變化了什麼

實驗看看

元素也可用H1 、P ...等HTML元素

你可以在上方單行內樣式修改或增加屬性:值:

style='border-left: 3px solid green;' /* 左框邊線粗、實線、顏色 */