CSS代码整理（笔记）

1.元素水平垂直居中

弹性盒子

.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

弹性盒子的兼容性见这：http://www.cnblogs.com/yangjie-space/p/4856109.html

writing-mode

   //css
   .content {
        writing-mode: tb-lr;
        writing-mode: vertical-lr;
        width: 100%;
        height: 200px;
        background: green;
        border:1px solid red;
        text-align: center;


       }
       .box {
      writing-mode: lr-tb;
      writing-mode: horizontal-tb;
      text-align: center;
      width: 100%;
      display: inline-block;
       }
       span{
      display: inline-block;
      text-align: left;
      text-align: initial;
      background:red;
      padding: 20px 10px;
       }
       //html
       <div class="content">
           <div class="box">
                 <span>大叔大婶多</span>
           </div>
       </div>

具体用法：http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/

2.改变input框placeholder颜色

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000; opacity:1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000;opacity:1;
}

input:-ms-input-placeholder{
color: #000;opacity:1;
}

input::-webkit-input-placeholder{
color: #000;opacity:1;
}

3.css Gradients 兼容写法（IE10+,chrome 10+,firefox 3.6+,safari 5.1+）

线性渐变

语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

 //默认渐变方向为由top到bottom
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
 //规定方向的渐变（例子：由左到右）
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
 //对角渐变
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
 //规定角度的渐变
  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */
 //规定多种颜色的渐变
  /* Safari 5.1 - 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Opera 11.1 - 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* 标准的语法 */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);  
 //规定重复的渐变：repeating-linear-gradient() 函数
 /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变

语法：background: radial-gradient(center, shape size, start-color, ..., last-color);

//均匀分布的渐变
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 标准的语法 */
//规定渐变比例的渐变
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */  
//重复的径向渐变：repeating-radial-gradient() 函数  
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Opera 11.6 - 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* 标准的语法 */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);

其他参数：

1. share参数，规定渐变的形状。值为： circle 或 ellipse
2. size参数，规定渐变的大小。值为：closest-side 或 farthest-side 或 closest-corner 或 farthest-corner