（盒子模型）

盒子模型

边框样式

border-style,定义边框样式：

边框颜色border-color

border-color 属性设置四条边框的颜色。. 此属性可设置 1 到 4 种颜色

name：指定颜色名称，如red
RGB：如red(225,0,0)
Hex：指定十六进制，如#ff0000

border-widh边框宽度

使用方法：
p { border-style:solid; border-width:15px; }

边框的复合性

border：宽度，样式，颜色；
（同时设置3个属性时，没有先后顺序，但是推荐官方的顺序）

外边距

元素的外边距（margin）是围绕在元素边框以外（不包括边框）的空白区域，这片区域不受 background 属性的影响，始终是透明的。
margin-top:100px;（设置元素上外边距）
margin-bottom:100px;（设置元素下外边距）
margin-right:50px;（设置元素右外边距）
margin-left:50px;（设置元素左外边距）

内边距

内边距（padding）是指元素内容区与边框之间的区域，与外边距不同，内边距会受到背景属性的影响

padding-top（设置元素上内边距）
padding-right（设置元素右内边距）
padding-bottom（设置元下内边距）
padding-left（设置元素左内边距）

盒子模型的尺寸

标准盒子模型的尺寸为：“内容的宽高+两侧内边距padding的大小+两侧边框border的大小”；而IE盒子模型的尺寸直接就为：“内容的宽高”，盒子设置的宽/高属性就是盒子自身的整体尺寸，如果带有内边距或边框，则通过缩小内容区域来实现。

box-sizing属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

圆角边框

border-radius

该属性是一个 简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。

即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。

当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。

radiusall-corner.png可以是 <length> 或者 <percentage>，表示边框四角的圆角半径。只在单值语法中使用。
top-left-and-bottom-righttop-left-bottom-right.png可以是 <length> 或者 <percentage>，表示边框左上角和右下角的圆角半径。只在双值语法中使用。
top-right-and-bottom-lefttop-right-bottom-left.png可以是 <length> 或者 <percentage>，表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。
top-lefttop-left.png可以是 <length> 或者 <percentage>，表示边框左上角的圆角半径。只在三值或四值语法中使用。
top-righttop-right.png可以是 <length> 或者 <percentage>，表示边框右上角的圆角半径。只在四值语法中使用。 bottom-rightbottom-rigth.png可以是 <length> 或者 <percentage>，表示边框右下角的圆角半径。只在三值或四值语法中使用。
bottom-leftbottom-left.png可以是 <length> 或者 <percentage>，表示边框左下角的圆角半径。只在四值语法中使用。 inherit 表示四个值都从父元素计算值继承。
<length>
<length> 定义圆形半径或椭圆的半长轴，半短轴。负值无效。
<percentage>
使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

box-shadow

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

当给出两个、三个或四个 值时。
如果只给出两个值，那么这两个值将会被当作 来解释。
如果给出了第三个值，那么第三个值将会被当作解释。
如果给出了第四个值，那么第四个值将会被当作来解释。
可选，inset关键字。
可选，值。
若要对同一个元素添加多个阴影效果，请使用逗号将每个阴影规则分隔开。