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