持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情
-
CSS3中可以通过box-sizing来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度
-
content-box即standard标准模式，盒子总体大小为width（height）+padding+border，内容区域为width和height部分，当添加了padding和border后，内容区域不变，总体会往外扩大
-
border-box即quirks怪异模式，盒子总体大小为width和height，添加了padding和border后，内容区域会收缩
-
CSS3新增属性
-
边框圆角
-
属性名：border-radius
-
作用：设置边框的圆角
-
属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比
-
单一属性写法：左上角border-top-left-radius:半径；右上角border-top-right-radius:半径；右下角border-bottom-right-radius:半径；左下角border-bottom-left-radius:半径；
-
简写方法：border-radius相当于四个单一属性的简写方法，类似padding也可以有四种值的写法。
-
border-radius：左上角 右上角 右下角 左下角；
-
border-radius：左上角 右上角和左下角 右下角；
-
border-radius：左上角和右下角 右上角和左下角；
-
border-radius：四个角相同；
-
/的属性值写法：border-radius属性值中出现了/斜线，那么/前面可以设置水平方向四种值的写法，/后面可以设置垂直方向四种值的写法👇
-
-
-
注意：如果只设置width和height，且width和height数值相等，此时给的radius为width的一半会出现正圆效果。如果存在padding、border和margin等，只需要把这些数值加width的一半就会有正圆效果。直接使用50%可以实现正圆效果
-
浏览器兼容：IE8及以下版本浏览器不支持border-radius属性，其他浏览器都支持
-
文字阴影
-
在CSS3中，text-shadow可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离，以及阴影颜色
-
语法：text-shadow属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是0
-
多层阴影：text-shadow属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。注意：多阴影中，先写的阴影压盖在后面的阴影上
-
-
盒子阴影（边框阴影）
-
在CSS3中，box-shadow属性用于对盒子边框添加阴影
-
语法：box-shadow属性向盒子添加阴影，属性值有2-4个长度值、可选的颜色值以及可选的inset关键词来规定，省略的长度是0（水平位置、垂直位置、模糊程度、扩展大小、颜色、是否内边框阴影）
-
注意：外部的边框阴影不需要进行设置，它是默认的，如果增加了outset值反而出现错误
-
多层阴影：box-shadow也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。多阴影中，先写的阴影压盖在后写的阴影上
-
-
