CSS 框線樣式

Html 網頁中的元素,其框線表達樣式 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-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;



框線樣式應用 CSS Border Application

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

background-size:12px 4px
background-size:6px 2px
background-size:3px 1px
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;}



END