盒子模型相关属性

（1）边框属性

设置内容 样式属性 常用属性值
边框样式 border-style：上【右 左 下】 none （无） solid（实线）
dashed（虚线） dotted（点线）
double（双实线）
边框宽度 border-width：
边框颜色 border-color：
综合设置边框 border：宽度 样式 颜色
圆角边框 border-radius
图片边框 border-images

图片边框

属性 说明
border-images-source 图片路径
border-images-slice 边框图像顶部、右侧、底部、左侧内偏移
border-images-width 边框宽度
border-images-outset 边框背景向盒子外部延伸的距离
border-images-repeat 背景图片的平铺方法

（2）边距属性

内边距

上内边距：paddinig-top
右内边距：paddinig-right
左内边距：paddinig-left
下内边距：paddinig-bottom

外边距

上外边距：margin-top
右外边距：margin-right
下外边距：margin-bottom
左外边距：margin-left

(3) box-shadow属性

语法格式：
box-shadow: _h-shadow_ _v-shadow_ _blur_ _spread_ _color_ inset
例子

  1. div{
  2.         box-shadow: 10px 10px 5px #888888;
  3.     }

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

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

(4) box-sizing属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
语法格式：
box-sizing: content-box|border-box|inherit;

值 描述
content-box 这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。