[TOC] #### 1. 什么是邊框 --- 百度百科邊框的定義:[https://baike.baidu.com/item/css邊框](https://baike.baidu.com/item/css邊框) CSS盒模型中的邊框所在位置:位于外邊距和內(nèi)邊距的中間 ![](https://img.itqaq.com/art/content/064c064dd914376e2106b08a822cfbb3.png) 在學(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. 屬性值說明** 四個(gè)值:左上角 右上角 右下角 左下角 兩個(gè)值:x軸 y軸 一個(gè)值:四個(gè)角的圓弧角度 1.% 設(shè)定x,y軸長度都是寬高的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> ``` ![](https://img.itqaq.com/art/content/7227d057c1a053de798d66f60c7c0153.png) 橢圓形: `寬是高的兩倍,邊框倒角取50%` 時(shí)邊框變?yōu)闄E圓 ```html <style> div { width: 300px; height: 150px; border: 2px solid red; border-radius: 50%; } </style> <div></div> ``` ![](https://img.itqaq.com/art/content/93b628f399b59c29a7ce26245d4d87c0.png)