本篇主要是一个关于css的background属性的简单性能介绍，主要是背景图的设置，背景色渐变，以及除此之外的文字阴影，盒子阴影，希望可以为页面提供更好的样式，因为都是基于css3的，所以还需要注意浏览器的兼容性问题
引入一条该属性的使用
background:#00FF00 url('../img.img') no-repeat fixed top
其中分别表示
background-color:背景颜色
background-image:背景图片,可设置多个图片
background-repeat:如何重复背景 repeat/repeat-x/repeat-y/no-repeat
background-attachment:是否固定或随着页面元素滚动 scroll/fixed
background-position:背景图片位置 x% y%/x y/left/center/right/top/bottom
同时我们还可以设置
background-size:背景图片尺寸
background-origin:定位,content-box, padding-box,和 border-box区域内可以放置背景图像
background-clip:绘制区域，content-box, padding-box,和 border-box区域
inherit:从父元素继承background
body {
background: url('/nestdr/images/IMG_1912.JPG') repeat-y scroll right,
url('/nestdr/images/IMG_1926.JPG') repeat-y scroll left;
background-size: 7%
}
例如现在看到的两边的背景图片就是依照上面的代码产生的
设置颜色，渐变和空虚
#example1{
background: -webkit-linear-gradient(33.33deg,gray,rgba(60,60,60,0.3),rgba(60,60,60,0.8)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(33.33deg,gray,rgba(60,60,60,0.3),rgba(60,60,60,0.8)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(33.33deg,gray,rgba(60,60,60,0.3),rgba(60,60,60,0.8)); /* Firefox 3.6 - 15 */
background: linear-gradient(33.33deg,gray,rgba(60,60,60,0.3),rgba(60,60,60,0.8));
border-radius: 20px;
/* 标准的语法 (red,blue),还可以添加属性--(left,red,blue),对角线--(left top,red,blue)*/
/* 角度(45deg,red,blue),添加多个颜色和添加透明度(left,red,blue,pink,purple,#123)(left,rgba(255,0,0,0.3),blue) */
/* 重复的线性渐变 background: repeating-linear-gradient(red, yellow 10%, green 20%);*/
}
#example2{
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 常规的语法(red, green, blue)会从中心到外延分别是红绿蓝拓展开 */
/* (red 5%, green 15%, blue 60%) 不规则拓展开径向渐变 */
/* 设置形状(circle, red, yellow, green) circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse */
/* 不规则的径向渐变,可以朝着预定的方向渐变 (60% 55%, farthest-side,blue,green,yellow,black);closest-side farthest-side closest-corner farthest-corner */
/* 重复的渐变 repeating-radial-gradient(red, yellow 10%, green 15%)*/
}
#example3::before{
/*盒子阴影*/
box-shadow:10px 10px 10px rgba(60,60,60,0.3);
/* box-shadow:10px 10px 10px 0px gray 卡片格式 */
}
#nav{
/*文字阴影*/
text-shadow:10px 10px 5px rgba(60,60,60,0.5);
}