CSS 樣式CSS border 框線樣式範例

CSS 框線樣式

元件框線樣式 border-style 預設值為 none 為沒有邊線,需要設定其值才會顯示出邊線。

border-top: 上框線
border-bottom: 下框線
border-left: 左框線
border-right: 右框線
border: 四邊框線
border-width: 邊線寬度

設定四周邊線的三個主要參數:寬 border-width、顏色 border-color、型態 border-style

border-width:1px; border-color:#939699; border-style:solid;
border:1px solid #939699;
border-left:5px solid #939699;
border-right:5px solid #939699;
border-bottom:1px solid #939699;

四邊不同框線一般可縮寫為

border:solid;border-width:1px 2px 4px 8px;border-color:#369 #585 #060 #030;

邊線的風格樣式

邊線的寬度於不同的風格樣式下、有些不同的效果、不同的瀏覽器於立體框顏色顯示亦不同。

border-style:solid /*實線框*/
border-style:dotted /*點線框*/
border-style:dashed /*分段線*/
border-style:double /*雙線框*/
border-style:groove /*立體內凸框*/
border-style:ridge /*立體浮凸框*/
border-style:inset /*凹框*/
border-style:outset /*凸框*/

border-width:1px; border-color:#939699;
border-style: solid; border-style: dotted; border-style: dashed;
border-width:2px; border-color:#939699;
border-style: solid; border-style: dotted; border-style: dashed;
border-width:3px; border-color:#939699;
border-style: solid; border-style: dotted; border-style: dashed; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset;
border-width:5px; border-color:#939699;
border-style: groove; border-style: ridge; border-style: inset; border-style: outset;