一、border
1.border：<line-width> || <line-style> || <color>
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
代码语言：javascript复制.box{
border:1px solid #eee;
}2.属性拆分
代码语言：javascript复制 border-width:1px
border-style:solid;
border-color:#eee;3.方向拆分
border-top
border-right
border-bottom
border-left
二、边框圆角 border-radius
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
代码语言：javascript复制 .box{
border:1px solid #eee;
border-radius:5px;
border-radius: 5px/10px;
}方向拆分
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
三、阴影 box-shadow
none：无阴影
<length>①：第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
<length>②：第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
<length>③：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
<length>④：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩
<color>：定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影
代码语言：javascript复制 .box{
box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}四、背景 background
由于背景参数较多所以推荐大家使用拆分背景属性
1、background-image 指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像”
代码语言：javascript复制 .box{
background-image:url(bg.jpg);
}2.background-position 指定背景图像在元素中出现的位置。
<percentage> 百分比
<length> 用长度值指定背景图像在元素中出现的位置。可以为负值。
center 背景图像横向或纵向居中。
left 背景图像从元素左边开始出现。
right 背景图像从元素右边开始出现。
top 背景图像从元素顶部开始出现。
bottom 背景图像从元素底部开始出现。
代码语言：javascript复制 div{
background-position: -68px -34px;
background-position: center;
}background-size 指定背景图像尺寸。
<percentage> 百分比
<length> 用长度值指定背景图像在元素中出现的位置。可以为负值。
auto 背景图像的真实大小。
cover 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
代码语言：javascript复制 div{
background-size:100px 140px;
background-size:cover;
}background-repeat 指定背景图像如何填充。
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向上平铺
repeat 背景图像在横向和纵向平铺
no-repeat 背景图像不平铺
round 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
space 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）
代码语言：javascript复制 div{
background-repeat: no-repeat;
}background-attachment 定义滚动时背景图像相对于谁固定。
fixed 背景图像相对于视口（viewport）固定。
scroll 背景图像相对于元素固定,默认
代码语言：javascript复制 div{
background-attachment: fixed;
}background-origin 指定背景图像从元素的哪个区域作为显示的原点。
border-box 从border区域（含border）开始显示背景图像。
padding-box 默认值，从padding区域（含padding）开始显示背景图像。
content-box 从content区域开始显示背景图像。
代码语言：javascript复制 div{
background-origin:border-box;
}background-clip 指定背景图像向外裁剪的区域。
border-box 默认值从border区域（含border）开始向外裁剪背景。
padding-box 从padding区域（含padding）开始向外裁剪背景。
content-box 从content区域开始向外裁剪背景。
代码语言：javascript复制 div{
background-clip:content-box;
}background-color 指定背景颜色
代码语言：javascript复制 div{
background-color: #808080;
}
