[TOC] #### 1. 什么是邊框 --- 百度百科邊框的定義：[https://baike.baidu.com/item/css邊框](https://baike.baidu.com/item/css邊框) CSS盒模型中的邊框所在位置：位于外邊距和內邊距的中間  在學校初次學習邊框時，老師是這樣講的：邊框是環繞在標簽寬度和高度周圍的線條 #### 2. CSS邊框屬性 --- 基本屬性（border）：邊框寬度、邊框樣式、邊框顏色 邊框倒角（border-radius） 邊框陰影（box-shadow） 輪廓屬性（outline） #### 3. border 屬性的幾種書寫方式 --- **a. 最簡潔，也是最常用的方式** ```css border: width style color; ``` + 簡寫方式的屬性值順序可以打亂 + 邊框樣式沒有默認值，不能省略，否則看不到邊框 + 寬度和顏色都有默認值可以省略，寬度默認為medium（3px），顏色默認為黑色 **b. 給某一個方向的邊框設置 `寬度、樣式、顏色`** ```css border-方向: width style color; /** 實線 **/ border-top: 1px solid red; /** 虛線 **/ border-right: 2px dashed green; /** 點狀邊框 **/ border-bottom: 3px dotted blue; /** 去除左邊框 **/ border-left: none; ``` **c. 給四個方向的邊框設置不同的屬性值** ```css border-屬性:上 右 下 左; border-width: 上 右 下 左; border-style: 上 右 下 左; border-color: 上 右 下 左; ``` **d. 給某一個邊框單獨設置某個屬性** ```css border-方向-屬性: 屬性值; border-top-width: 5px; border-right-style: solid; ``` #### 4. 邊框倒角（border-radius） --- **a. 作用：**設定盒子模型四個角的圓弧角度 ```css border-radius: 左上 右上 右下 左下; ``` **b. 屬性值說明** 四個值：左上角 右上角 右下角 左下角 兩個值：x軸 y軸 一個值：四個角的圓弧角度 1.% 設定x,y軸長度都是寬高的50% 2.px 一個具體數值,表示同時設定x軸,y軸的半徑 3.x軸/y軸 第一個屬性值表示x軸半徑數值的設定，第一個屬性值表示y軸半徑數值的設定 **c. 畫圖形** 標準圓：`正方形邊框x軸、y軸倒角都取50%` 時邊框變為圓 ```html <style> div { width: 150px; height: 150px; border: 2px solid red; border-radius: 50%; } </style> <div></div> ```  橢圓形: `寬是高的兩倍，邊框倒角取50%` 時邊框變為橢圓 ```html <style> div { width: 300px; height: 150px; border: 2px solid red; border-radius: 50%; } </style> <div></div> ```