CSS3 :not()選擇器

  :not(p)    //設(shè)置非 <p> 元素的所有元素的背景色：
  {  background-color: #ff0000; }
  
  :not(:last-child){.....}

自定義超出N行用...代替
.ellipsis-row(n){
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:n;
-webkit-box-orient:vertical;
}

img 水平 垂直居中

#music > img{
       width: 80%; 
       left: 0; top: 0; bottom: 0; right: 0; 
       position: absolute; margin: auto;
}

還有就是，position:absolute; top:50%; margin-top:-XXXpx; (XXX表示圖片高度的一半)

禁止用戶選中網(wǎng)頁上的內(nèi)容

• IE及Chrome下的方法一樣，在標(biāo)簽（body）上，使用 onselectstart="return false"

• Firefox 下，控制 css: body {-moz-user-select: none;}

** 解決中英文兩端對齊**

ox.style.textAlign = "justify";
box.style.letterSpacing = '-.15em';
box.innerHTML = box.innerHTML.split("").join(" ");

出處：http://www.zhangxinxu.com/wordpress/2015/08/chinese-english-same-padding-text-justify/

修改input placeholder顏色

 ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } 
 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } 
 ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; }
  :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; } 

Safari下 菜單條 自動fix屬性

 position: -webkit-sticky; 
 z-index: 100; 
 top: 0px; 
 left: 0px;

媒體查詢

  @media screen and (width:800px){.....}
  @import url(example.css) screen and (width:800px);
  <link media="screen and (width:800px)" rel="stylesheet" href="example.css">

如何讓contenteditable元素只能輸入純文本

原文地址：http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/

利用全瀏覽器都支持的contenteditable
模擬文本域可以實(shí)現(xiàn)體驗(yàn)相當(dāng)不錯的高度跟隨內(nèi)容自動撐開的效果，但是呢，有個很大的問題就是HTML內(nèi)容可以直接被粘貼進(jìn)去

一個div元素，要讓其可編輯，也就是可讀寫，contenteditable屬性是最常用方法，做前端的基本上都知道。但是，知道CSS中有屬性可以讓普通元素可讀寫的的同學(xué)怕是就少多了。

主角亮相：user-modify.
支持屬性值如下：
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only;

其中，write-only不用在意，當(dāng)下這個年代，基本上沒有瀏覽器支持，以后估計(jì)也不會有。read-only表示只讀，就是普通元素的默認(rèn)狀態(tài)啦。然后，read-write
和read-write-plaintext-only會讓元素表現(xiàn)得像個文本域一樣，可以focus以及輸入內(nèi)容。

** contenteditable的屬性：**
contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"
別問我，我也不知道"events"和"caret"是干什么用的，嘿，但是"plaintext-only"我是知道的，可以讓編輯區(qū)域只能鍵入純文本。這里就不需要demo了，直接下面的框框，大家可以試試，看看能不能搞富文本。
<div contenteditable="plaintext-only"></div>

contenteditable="plaintext-only" 和CSS只的-webkit-user-modify: read-write-plaintext-only一樣，目前僅僅是Chrome瀏覽器支持比較好的。

3D

• perspective （ perspective的中文意思是：透視，視角?。?/li>

perspective
屬性的存在與否決定了你所看到的是2次元的還是3次元的，也就是是2D transform還是3D transform. 這不難理解，沒有透視，不成3D.

CSS3 3D transform的透視點(diǎn)是在瀏覽器的前方！

  -webkit-perspective:800px; 
  //子元素獲得3D元素支持，這里是設(shè)置子元素距離 視圖的位置

• backface-visibility 屬性

     div{
      backface-visibility:hidden; /* 表示不面向屏幕時(shí)隱藏 */
      -webkit-backface-visibility:hidden; /* Chrome 和 Safari */
      -moz-backface-visibility:hidden; /* Firefox */
      -ms-backface-visibility:hidden; /* Internet Explorer */
      
      /* 加上旋轉(zhuǎn)180° 背向用戶。hidden表示背向用戶*/
      transform:rotateY(180deg);
      -webkit-transform:rotateY(180deg); /* Chrome and Safari */
      -moz-transform:rotateY(180deg); /* Firefox */
    }
  

• transform-style:perserve-3d 支持子元素3D效果

• transform: translate(0px,0px) rotateY(0deg) 定義位移以及沿著Y軸旋轉(zhuǎn)

• transition : property duration timing-function delay;
  • property 規(guī)定設(shè)置過渡效果的css屬性的名稱。
  • duration 規(guī)定完成過渡效果需要的多少秒或毫秒
  • timing-function 規(guī)定速度效果的速度曲線 默認(rèn)ease
  • delay 定義延遲多久執(zhí)行 默認(rèn)0

使移動端滑動不出滾動條及安卓回彈效果(less)

  .list{   
          overflow:hidden;
          overflow-x: scroll; 
          white-space: nowrap;
          -webkit-overflow-scrolling: touch;
          -moz-overflow-scrolling: touch;
          -o-overflow-scrolling: touch;
          -ms-overflow-scrolling: touch;
          overflow-scrolling: touch;
          &::-webkit-scrollbar {
            display:none;
          }
  }