讓你立馬學會像前端工程師一樣用CSS製作邊框!

讓你立馬學會像前端工程師一樣用CSS製作邊框!

讓你立馬學會像前端工程師一樣用CSS製作邊框!
讓你立馬學會像前端工程師一樣用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; }

See the Pen #demo-border-width by Tedutw (@Tedutw) on CodePen.

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; }

See the Pen #demo-border style by Tedutw (@Tedutw) on CodePen.

border-color: 邊線的顏色

border-color 屬性是用來設定邊框的顏色。範例如下:

/*紅色邊框*/.red{ border-color: red;border-style:solid; }
/*藍色邊框*/.blue{ border-color: blue;border-style:solid; }

See the Pen #demo-border-color by Tedutw (@Tedutw) on CodePen.

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;}

See the Pen #demo-border-top/left/bottom/right by Tedutw (@Tedutw) on CodePen.

border: 四邊框線

前端工程師遇到四邊的邊框屬性都一樣的情形,就可以在同一行用一個 border 屬性一次宣告邊框樣式、邊框寬度、以及邊框顏色,而不必四個邊都描述一次。

container{...
border: 1px solid #000000;
...}

See the Pen 用一行來宣佈所有邊框的屬性 by Tedutw (@Tedutw) on CodePen.

 

 

 

延伸閱讀:

前端工程師一定都認識的標籤們,今天就雙手奉上了!(上)

哪尼?前端工程師要知道的父子繼承關係!?

CSS和HTML如何搭配地巧妙,前端工程師最會了啊!

從零開始,Python課程帶你成為進擊的IT巨人!

上UI課程,有朝一日你也會是台灣之光!

在煩惱你的台灣國語手機聽不懂嗎? 讓人工智慧雅婷來幫你搞定一切吧!!

達內教育開幕 培養台灣IT人才進入全球企業

 

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料