「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

CSS笔记-盒子样式

关于盒子模型，除了上一章节记录的外边距margin、边框border、内边距padding 以及 盒子本身的宽width 高height 等属性外，盒子还有许多其他有趣的属性。

1. box-sizing

box-sizing 属性用来定义盒子如何计算总宽度和总高度

• content-box 默认值。宽高设置内容区的宽高，并不包括内边距padding和边框border。即 设置div的宽高为100px，则该盒子内容区的宽高就是100px，若此时设置盒子border宽度为20px，那么盒子占用的空间大小为 20*2+100 = 140px

• border-box  宽度和高度用来设置整个盒子可见框的大小，也就是说 设置盒子宽高为100px时 ，100px 包含了内边距和边框，那么内容区的宽高=100-padding-border。一般情况下，该属性值更容易让我们掌控盒子的主体宽高及定位。

2. outline

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

例如 a 标签，当鼠标点击时会出现一个虚线框，这个虚线框就是轮廓(outline)。

css的轮廓（outline）属性可以改变这个默认的轮廓虚线框效果。

属性	说明
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度
outline-color	设置轮廓的颜色
outline-offset	对轮廓进行偏移，并在边框边缘进行绘制

3. border-radius

边框圆角（border-radius）用来设置盒子的边框角度弧形，设置的值为圆的半径。

共有4个属性

• border-top-left-radius 左上角

• border-top-right-radius 右上角

• border-bottom-left-radius 左下角

• border-bottom-right-radius 右下角

也可直接设置 border-raduis：20px。 即 所有的角半径都是20px

或者设置成 border-raduis：100% 。即 圆形

4. box-shadow

阴影（box-shadow）用来设置盒子的阴影效果。该属性不影响布局，通常用来装饰盒子立体效果。

例如： box-shadow: 10px 10px 40px rgba(0,0,0,.3);

第一个值 水平偏移量，x轴的阴影，正值向右，负值向左

第二个值 垂直偏移量，y轴的阴影，正值向下，负值向上

第三个值 阴影的模糊半径，倘若x 和 y 都为0，那么就向4个方向模糊

第四个值 阴影的颜色