第六章 盒子模型

第六章 盒子模型

一、边框

1、相关的设置都是按照顺时针进行

2、粗细:border-width（粗细）：（上、右、下、左）/（上、左右、下）/（上下、左右）

​ 取值：(像素值、thin细、medium中、thick粗)

​ border-top-width：上边框粗细

​ border-right-width：右边框粗细

​ border-bottom-width：下边框粗细

​ border-left-width：左边框粗细

3、颜色：border-color(颜色属性):（上、右、下、左）/（上、左右、下）/（上下、左右）

​ border-top-color：上边框颜色

​ border-right-color：右边框颜色

​ border-bottom-color：下边框颜色

​ border-left-color：左边框颜色

4、border-style（边款样式）：（上、右、下、左）/（上、左右、下）/（上下、左右）

​ solid实线、 dotted点状 、dashed虚线、 double双线、none无边框

​ border-top-style:上边框样式

​ border-right-style:右边框样式

​ border-bottom-style:下边框样式

​ border-left-style:左边框样式

5、注意事项：按照顺时针一一对应，如果只有一个值，则四个边框都一样被设置，如果有两个 值，则第一第三是一样，2 4 一样，【对边一样】

二、边距

1、内边距：padding

​ padding：所有内边距（上、右、下、左）/（上、左右、下）/（上下、左右）

​ padding-left ：左内边距

​ padding-right：右内边距

​ padding-top：上内边距

​ padding-bottom下内边距

2、外边距：margin

​ margin：所有外边距（上、右、下、左）/（上、左右、下）/（上下、左右）

​ margin-top：左内边距

​ margin-right：右内边距

​ margin-bottom：上内边距

​ margin-left：下内边距

三、圆角边框

1、border-radius：角属性（左上、右上、右下、左下）取值：像素/百分比

​ 圆形；（border-radius：50% 50% 50% 50%）

​ 半圆；（border-radius：50% 50% 0 0）相邻两个为半径长度

​ 扇形；（border-radius：100% 0 0 0）任意角为百分百值

四、盒子阴影

1、盒子阴影：box-shadow:inset[阴影类型] x-offset【X轴】 y-offset【Y轴】 blur-radius【阴影半径】 color颜色;

inset：内阴影