css3盒模型和新增属性(圆角，文字阴影，盒子阴影)

• css3怪异盒模型
• 边框圆角
• 文字阴影
• 盒子阴影

css3盒模型

css3盒模型：css3中我们可以通过box-sizing来指定盒模型，这样我们就可以设置如何计算一个元素的总宽高
属性名：box-sizing
属性值：content-box、border-box

属性值	简介
content-box	默认值，标准盒模型width于height只包括内容的宽高在width和height之外绘制元素的内边框和边框
border-box	怪异盒模型width和height属性包括内容，内边框和边框，不包括外边框。为元素指定的任何内边距和边都将在已设定好的width和height内绘制

代码示范：（怪异盒模型，不用考虑边框的计算，width多少就固定多少）

新增属性(圆角，文字阴影，盒子阴影)

css3新增了调节border的角度，文字的阴影和盒子阴影样式

边框圆角

属性名：border-radius
作用：设置边框圆角
属性值：px，%；
单一属性：
border-top-left-radius：左上半径
border-top-right-radius：右上半径
border-bottom-left-radius：左下半径
border-bottom-right-radius：右下半径
代码示范：

文字阴影(可以叠加多层)

在css中，text-shadow可以向文本应用阴影。通过属性值规定水平阴影、垂直阴影、模糊距离、以及模糊颜色
书写方式：text-shadow:水平，垂直， 模糊，颜色；（可叠加）

属性值	简介
h-shadow	必须。水平位置阴影，允许负值
v-shadow	必须。垂直位置阴影，允许负值
blur	可选。模糊距离
color	可选，阴影颜色

代码示范：

盒子阴影(可以叠加多层)

在css3中，box-shadow属性用于对盒子边框添加阴影

属性值	简介
h-shadow	必须。水平位置阴影，允许负值
v-shadow	必须。垂直位置阴影，允许负值
blur	可选。模糊距离
color	可选，阴影颜色
spread	可选，阴影尺寸
inset	可选，阴影外部改为内部阴影

代码示范：