盒子模型
每一个可见的 HTML 元素都是一个盒子
盒子模型从外到内分别是 margin border padding content
盒子模型的属性:box-sizing box-sizing:content-box 时是标准盒子模型;box-sizing:border-box 时是IE 盒子模型;inherit 规定从父元素继承 box-sizing 属性
当 margin/padding 属性后只跟一个值--上下左右;两个值--上下 左右;三个值:上 左右 下;四个值:上 右 下 左
border-style 属性
none:无边框
hidden:与 none 相同 但是用于表时解决边框冲突
dotted:点状边框
dashed:虚线
solid:实线
double:双线
groove:3D 凹槽
inherit:继承父元素边框
盒子阴影(CSS3 新增属性)box-shadow
正规语法:none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
inset:默认阴影在边框外 如果使用 inset 阴影在边框内
offset-x, offset-y:阴影偏移量;offset-x 值为正向右偏,为负向左偏;offset-y 是垂直偏移量,为负阴影在元素下
blur-radius:值越大阴影模糊面积越大 阴影模糊越淡 不可为负
spread-radius:正值 阴影扩大,负值 阴影收缩
color:颜色
设置多个阴影时用逗号隔开