CSS3学习（六）：盒模型补充

1、盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：

• content-box 默认值，宽度和高度用来设置内容区的大小
• border-box 宽度和高度用来设置整个盒子可见框的大小

2、轮廓

outline用来设置元素的轮廓线，用法和border一模一样

轮廓和边框不同点是，轮廓线不会占据空间

3、阴影

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

阴影示例

4、圆角

border-radius 用来设置圆角，圆角设置的是圆的半径大小
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 分别设置四个角

border-radius 可以分别指定四个角的圆角

• 四个值：左上 右上 右下 左下
• 三个值：左上 右上/左下 右下
• 两个值：左上/右下 右上/左下
• 一个值：左上/右上/右下/左下

椭圆圆角：

使用border-radius指定四个角的圆角时，分别设定水平半径和垂直半径，用/隔开。
使用border-top-left-radius等指定圆角时，分别设定水平半径和垂直半径，用空格隔开。