close

前端工程師法寶CSS之邊框屬性是什麼?

前端工程師常常會利用CSS設計網頁,本篇將針對邊框來詳細說明,希望對你們有幫助.

前端工程師使用的基本工具 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 屬性指定邊框的樣式。以下列出前端工程師​​​​​​​常見的 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: 上/左/下/右框線

我們可以將上下左右方向和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說，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;
...}

​​​​​​​



參考連結:

前端工程師必知CSS指令:盒子模型(上)-盒子屬性.邊界 ​​​​​​​

前端工程師必知CSS指令:盒子模型(下)-邊框.留白 ​​​​​​​

先別管韓國魚了,你有聽說過Python嗎? ​​​​​​​

成為前端工程師前的教戰手冊 ​​​​​​​

12 年國教將會融入AI 人工智慧! ​​​​​​​

達內教育海外合作企業 ​​​​​​​

達內課程先就業再付款- 中時電子報 ​​​​​​​

 

arrow
arrow
    文章標籤
    前端工程師 前端 工程師 CSS 語法 程式
    全站熱搜

    IzzySixxi 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄