CSS 边框属性和背景图的用法

属性                                            描述
border                   简写属性，用于把针对四个边的属性设置在一个声明。
border-style             用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width             简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color             简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom            简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color      设置元素的下边框的颜色。
border-bottom-style      设置元素的下边框的样式。
border-bottom-width      设置元素的下边框的宽度。
border-left              简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color        设置元素的左边框的颜色。
border-left-style        设置元素的左边框的样式。
border-left-width        设置元素的左边框的宽度。
border-right             简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color       设置元素的右边框的颜色。
border-right-style       设置元素的右边框的样式。
border-right-width       设置元素的右边框的宽度。
border-top               简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color         设置元素的上边框的颜色。
border-top-style         设置元素的上边框的样式。
border-top-width         设置元素的上边框的宽度。
   

背景用法大全：
background 属性是CSS中用于设置元素背景的属性，最简单的background属 性名，是针对背景若干设定的合并简写，最早的CSS只能使用单一背景图片，而在现在却可以设置多个背景图片。

一、背景颜色之 background-color
background-color是最…常用的属性之一，取值是唯一的，颜色值。

二、背景图片之 background-image
background-image顾名思义是设置背景“图片”的，这里的图片并非我们通常意义上理解的“图片”，而是由CSS Image Values and Replaced Content Module所规定的一系列内容，用以替代CSS2中所规定的background-image属性与list-style-image属性中的url参数，或者作为伪元素content的值。

现在浏览器也没有完全实现这些，可用的包括url()引用图片，和渐变“图片”，然后以逗号分隔所有图片（如果有）。

三、CSS 渐变
径向渐变：由中心向外扩散，呈现圆形
	radial-gradient(形状 半径，颜色 范围，......)
    形状 circle圆形     ellipse椭圆
    半径:可以写像素值，不可以写百分比
        closest-side     最近的边
        closest-corner   最近的角
        farthest-side    最远的边
        farthest-corner  最远的角

线性渐变：由一个方向向另一个方向扩散
linear-gradient(方向30deg（to top/left/right/bottom）,颜色 范围,)
    注意：webkit前缀的方向和普通样式的方向差了90deg
    background: linear-gradient(0deg,#ff8080 20%, #ae81ff 30%);
    background: -webkit-linear-gradient(90deg,#ff8080 20%, #ae81ff 30%);

四、背景重复之 background-repeat
background-repead用于设置背景的重复方式，可选值有下面几种：

1、no-repeat 不重复，等价于no-repeat no-repeat
2、repeat-X X轴方向（横向）重复，等价于repeat no-repeat
3、repeat-Y Y轴方向（纵向）重复，等价于no-repeat repeat
4、repeat 重复平铺，等价于repeat repeat
除了这4个常用的，还有两个…大概没什么人用，兼容性也不是很好的取值：
5、round 图像在指定方向平铺，会根据显示空间的大小缩放图像（什么时候缩放，什么时候增减平铺的数量是由浏览器决定的）
6、space 图像会尽可能重复，但不裁剪，第一张和最后一张固定在元素两端，剩下的均匀分布。此时background-position属性被忽视。另外只有在图像大过元素的时候会发生裁剪。

五、背景固定之 background-attachment
background-attachment用于设置背景相对的固定方式，可选值有：
1、scroll 默认值，背景相对于元素固定。
2、fixed 背景相对于整个窗口固定。随着最近全屏大图网站的流行，这种背景固定模式也日渐多见起来。
3、local 背景相对于元素内容固定，如果元素内有滚动条，背景会随着内容滚动。
local这种模式我们几乎不怎么用到，这里找到一篇文章，作者写了一个Demo，在元素出现滚动条的时候，会在它的可滚动方向出现阴影。
虽然是属于交互设计范畴，但随着各个网站更加强调重视用户体验，这种需求是早晚的事，而作者的Demo是非常有趣（且有效率）的实现方式。

六、背景定位之 background-position
background-positon，顾名思义就是用来定位的…但是这个定位吧…语法很复杂（或者说很随意）。可用的各种指示方向的关键字，也可以用数字单位或者百分比，写法有下面几种：
1·、并列写两个关键字（或值），第一个值代表它的水平位置，第二个值代表它的垂直位置（这个和padding、margin、border这些先上下再左右的属性刚好是反的…）。另外如果两个都是关键字，那么位置可以交换，也就是说，center left是合法的，然而50% left不行。
2、只写一个关键字（或值），那么它的第二个值就默认为center（居中）。
3、三、四值，可以从元素的四周定位，比如离右边10px，底边5px，就可以写成right 10px bottom 5px，两组关键字-值对可以交换位置，也可以用center替代关键字-值。这种写法目前（2016-06）只有FF支持。

七、背景裁切之 background-clip
background-clip是设定背景所覆盖的范围的属性。可选值有：
1、border-box 默认值，背景延伸到边框下，但是只有当边框的颜色是半透明的时候才能看到延伸过来的背景。
2、padding-box 边框下没有背景。
3、content-box 只有内容下有背景（padding的空间里都没有）

八、背景原点之 background-origin
background-origin指定了背景图片定位的原点。属性取值与background-clip相同，但是clip是会对背景图片进行裁切，而origin是用于定位的。

可以看这个Demo，展现得比较清晰了。

九、背景尺寸之 background-size
background-size用来设置背景尺寸，可选值有：
1·、一对值\百分比或auto，百分比是相对于background-origin所设置的尺寸而言的，auto就是图片原本的尺寸，两个数值先宽后高。
2、cover 缩放图片，令其完全覆盖背景区域，可能导致图片某些区域不可见。
3、contain 缩放图片，令其以最大尺寸完整展现在背景区域中，可能导致背景某些区域变成空白。