CSS（2）-背景、颜色、盒子阴影

背景

  background: url('../img/backgroud.jpg') no-repeat;  //不改变图像比例  -webkit-background-size: 100% auto;  background-size: 100% auto;  -webkit-background-size: auto 100%;  background-size: auto 100%;  //覆盖边框，缩放图片  -webkit-background-origin:border-box ;  background-origin: border-box ;  //content-box，不包括边框，切割图片  -webkit-background-clip:padding-box ;  background-clip: padding-box ;

颜色

  //如果定义了color，子元素都可以使用currentColor调用color值，如果没指定，currentColor默认是黑色  currentColor 

渐变

    //线性渐变，默认是从上到下渐变 to top ， to left，45deg    background: linear-gradient(to right,red, blue);    //径向渐变    background: radial-gradient(red, blue, green, yellow, indigo,violet)        //使用线性渐变，由浅到深，打造凸起效果的按钮    background: linear-gradient(#ffffff, #999999);    //使用渐变打造文字光影效果。

圆角

    //圆形，50%以上就不再有变化。    border-radius: 50%

盒子阴影

    //造成盒子突起效果  -webkit-box-shadow: inset 0px 0px 10px red;  -moz-box-shadow: inset 0px 0px 10px red;  box-shadow: inset 0px 0px 10px red;  //悬浮效果  -webkit-box-shadow: 0px 0px 10px red;  -moz-box-shadow:  0px 0px 10px red;  box-shadow: 0px 0px 10px red;    //加上阴影尺寸之后更有立体效果    box-shadow: 5px 5px 30px 10px black;    //苹果曾经用过的效果    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.35);    -moz-box-shadow:  0 1px 3px rgba(0,0,0,.35);    box-shadow: 0 1px 3px rgba(0,0,0,.35);