盒子模型（.盒子边框属性/.盒子的构成/设置圆角边框/盒子阴影）

第六章

一、盒子模型

1.盒子边框属性

顺序为上 右 下 左

2.边框粗细（border-width）

顺序同样为 上右下左

3.边框样式（border-style）

顺序同样为 上右下左 常用的两个 solid (实线 ) dashed(虚线)

border 简写

border: 1px dashed red;
没有顺序要求

4.盒子的构成

内容 内边距(padding) 边框线(border) 外边距（margin）

盒子居中显示 margin ：0px auto;

内边距(padding) 边框线(border) 外边距（margin）都可以上下左右分别设置。

box-sizing

可以给div设置，设置的padding会内缩，防止盒子因为设置内边距和边框线而变大
box-sizing： border-box 

5.设置圆角边框

border-radius: 20px 10px 50px 30px;(上右下左)

5.1 设置圆型

宽高相同， border-radius：50%宽

5.2 设置 半圆形

制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

上半圆   
.yi{
        width: 200px;           /* 宽度是高度的2倍 */
        height: 100px;          /* 高度 */
        background-color: purple; /* 背景颜色 */
        border-top-left-radius: 100px; /* 圆角半径设置为高度值 */
        border-top-right-radius: 100px; /* 圆角半径设置为高度值 */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        }
下半圆
        width: 200px;           /* 宽度是高度的2倍 */
        height: 100px;          /* 高度 */
        background-color: purple; /* 背景颜色 */
        border-bottom-left-radius: 100px; /* 圆角半径设置为高度值 */
        border-bottom-right-radius: 100px; /* 圆角半径设置为高度值 */
        border-top-left-radius: 0;
        border-top-right-radius: 0;

5.3 四分之一圆

“三同”是元素宽度、高度、圆角半径相同“一不同”是圆角取值位置不同

  .si{
            width: 100px;
            height: 100px;
            background-color: purple;
            border-top-left-radius: 100px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

6.盒子阴影

box-shadow 默认为外部 inset 为内部

box-shadow:inset  x-offset  y-offset  blur-radius  color;
			内/外   x轴       y轴        模糊半径      颜色
ul:hover{
box-shadow: 0 20px 20px rgb(241, 6, 6 ,1)；
}
一般都是与鼠标悬停连用