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

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>

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