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);