在 CSS 中常見的邊框 (border) 屬性,分別介紹如下:
目錄 border-width: 邊線的寬度 border-style:邊框樣式 border-color:邊線的顏色 border-top/left/bottom/right: 上/左/下/右框線 border: 四邊框線 |
border-width: 邊線的寬度
border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚),或是一個數值單位。/*薄線寬*/.thin { border-width: thin; border-style:solid;}
/*中等線寬*/.medium { border-width: medium; border-style:solid;}
/*厚線寬*/.thick { border-width: thick; border-style:solid;}
/*自行設定線寬*/.number { border-style:solid; }
border-width:邊線的樣式
border-style 屬性指定邊框的樣式。以下先為前端工程師,及各位對CSS邊框有興趣的人,列出常見的 border-style 屬性以及顯示的結果:/*實線的CSS*/.solid { border-style: solid; }
/*點線的CSS*/.dotted { border-style: dotted; }
/*虛線的CSS*/.dashed { border-style: dashed; }
/*雙線的CSS*/.double { border-style: double; }
/*凸線的CSS*/.ridge { border-style: ridge; }
/*凹線的CSS*/.groove { border-style: groove; }
/*嵌入線的CSS*/.inset { border-style: inset; }
/*浮出線的CSS*/.outset { border-style: outset; }
border-color: 邊線的顏色
而border-color 屬性是用來設定邊框的顏色。範例如下:/*紅色邊框*/.red{ border-color: red;border-style:solid; }
/*藍色邊框*/.blue{ border-color: blue;border-style:solid; }
border-top/left/bottom/right: 上/左/下/右框線
CSS的邊框,我們也可將上下左右方向和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說,border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子:/*上邊框為實線,下邊框為點線*/
.topbottom{border-top-style:solid; border-bottom-style:dotted;}
/*上邊框為實線,且寬度中等*/
.top{border-top-style:solid; border-top-width:medium;}
/*左邊框為實線,下邊框為紅色虛線*/
.leftbottom{border-left-style:solid;
border-bottom-style:dashed; border-bottom-color:#00FF00;}
border: 四邊框線
最後,若前端工程師們發現,CSS邊框的四個邊屬性都一樣,那我們可以在同一行用一個 border 屬性一次宣告邊框樣式、邊框寬度、以及邊框顏色,而不必四個邊都描述一次。container{...
border: 1px solid #000000;
...}
推薦閱讀:
他們都沒有相關背景,竟都如願變成工程師,來聽聽他們去哪裡上HTML5教學
輕鬆學HTML5教學裡的標籤
HTML5教學之標籤的重要性-網頁設計更上手的小秘密
網路行銷課程越來越進階!現在人人都有一個3D虛擬的自己!
大賣場引進AI人工智慧進行重複率高的工作,讓員工更用心在顧客服務上!!
有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90
達內課程先就業再付款- 中時電子報