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-width:5px;border-color:#009ac9;border-style:dashed solid;

邊線的風格樣式

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

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-width:2px; border-color:#939699;

border-width:3px; border-color:#939699;

border-width:5px; border-color:#939699;

框線樣式應用 CSS Border Application

使用 border-style:dotted 或 border-style:dashed 常出現瀏覽器不同而顯示出不同的點線。使用 linear-gradient 來顯示，控制點的大小 background-size: 6px 2px、點的方向 Horizontal 或 Vertical background-repeat: repeat-x 及顏色等。

div{
background-image:linear-gradient(to right, #009ac9 33%, rgba(255,255,255,0) 0%);
background-position:bottom;
background-size:6px 2px;
background-repeat:repeat-x;
height:20px; /* 如果容器內沒有元素需加高度 */}

四周點線亦可使用不同顏色顯示。

div{
background:linear-gradient(to right,orange 50%,rgba(255,255,255,0) 0%),
  linear-gradient(blue 50%,rgba(255,255,255,0) 0%),
  linear-gradient(to right,green 50%,rgba(255,255,255,0) 0%),
  linear-gradient(red 50%,rgba(255,255,255,0) 0%);
background-position:top,right,bottom,left;
background-repeat:repeat-x,repeat-y;
background-size:6px 2px,2px 6px;
height:100px;}

使用 linear-gradient 漸層顏色表達框線。

div{background-color:#f3f6f9;border:solid;
border-image:linear-gradient(90deg,rgba(90,90,90,0),rgba(90,90,90,1),rgba(90,90,90,0)) 100% 0;
border-width:3px;
height:80px;}