CSS border 屬性允許您指定元素邊框的樣式、寬度和顏色。

CSS邊框 border

1.設置邊框樣式：

border-style:樣式；

可選的樣式有：none 無邊框 ，dotted 虛線邊框 ，dashed 虛線邊框 ，solid 實線邊框 ，double 雙邊框 ，groove 凹槽邊框， ridge 壟狀邊框 ，inset 嵌入邊框 ，outset 外凸邊框 ，hidden 隱藏邊框

border-top-style:none; 上邊框樣式

border-bottom-style:solid; 下邊框樣式

border-left-style: dashed； 左邊框樣式

border-right-style:double; 右邊框樣式

border-style:dotted solid dashed double; （上右下左邊框）

2.設置邊框寬度：

邊框寬度不能單獨設置，必須在設置了邊框樣式后寬度才會生效

border-width:1px; 寬度為1像素的邊框

border-top-width:15px; 上邊框15像素

border-bottom-width:15px; 下邊框

border-left-width:15px; 左邊框

border-right-width:15px; 右邊框

CSS輪廓 outline

outline（輪廓）是繪制于元素周圍的一條線，位于邊框邊緣外圍，可以起到突出元素的作用 可以設置的屬性有 顏色 樣式 寬度

1、輪廓顏色

outline-color：red；

2.輪廓樣式

outline-style：樣式值；

樣式值參考如下：

none 默認。定義無輪廓。

dotted 定義點狀的輪廓。

dashed 定義虛線輪廓。

solid 定義實線輪廓。

double 定義雙線輪廓。雙線的寬度等同于 outline-width 的值。

groove 定義 3D 凹槽輪廓。此效果取決于 outline-color 值。

ridge 定義 3D 凸槽輪廓。此效果取決于 outline-color 值。

inset 定義 3D 凹邊輪廓。此效果取決于 outline-color 值。

outset 定義 3D 凸邊輪廓。此效果取決于 outline-color 值。

3、輪廓寬度：

outline-width：寬度值；

可能出現的寬度值參考如下；

thin 規定細輪廓。

medium 默認。規定中等的輪廓。

thick 規定粗的輪廓。

length 允許您規定輪廓粗細的值。

CSS外邊距 margin

1、什么是外邊距

外邊距控制塊級元素之間的距離，他們是透明不可見的，包括margin-top, margin-right, margin-bottom, margin-left

2.外邊距的寫法

（1）margin: 40px 30px 20px 10px; 上右下左

（2）margin:30px 40px 20px; 上 左右 下

（3）margin:30px 40px; 上下 左右

（4）margin:40px; 上下左右

3.可能的值

（1）length 規定具體單位記的外邊距長度

（2）% 基于父元素的寬度的外邊距的長度

（3）auto 瀏覽器計算外邊距

四、CSS內邊距padding

1.什么是內邊距

控制塊級元素內部content和border之間的距離

2、常用寫法

（1）padding: 40px 30px 20px 10px; 上右下左

（2）padding:30px 40px 20px; 上 左右 下

（3）padding:30px 40px; 上下 左右

（4）padding:40px; 上下左右

3.可能取的值

（1）length 規定具體單位記的外邊距長度

（2）% 基于父元素的寬度的外邊距的長度

（3）auto 瀏覽器計算外邊距