你很熟悉CSS，卻沒掌握這些CSS技巧

轉載來自 http://www.html5cn.org/article-9294-1.htmlcss

作前端開發的人都很熟悉CSS，一個漂亮的網頁由HTML標籤和控制這些標籤佈局的CSS組成，所以CSS在開發中起到功不可沒的做用，在咱們頻繁使用CSS過程當中掌握一些技巧是必須的，本文分享了22個方便且很重要的CSS技巧，值得收藏！html

　　混合模式前端

　　目前，Firefox 和 Safari 開始支持混合模式，就像 Photoshop 同樣。Chrome 和 Opera 也支持，只是有些差別。html5

　　你能夠建立不一樣的樣式。下面是示例代碼：git

 
       1 
       .blend { 
      
       2 
           background: #fff; 
      
       3 
       } 
      
       4 
       .blend img { 
      
       5 
           mix-blend-mode: darken;  
      
       6 
       }

　　在線嘗試一下 CSS 混合模式和濾鏡，效果頗有趣！github

　　漸變邊框web

　　現在，你能夠在邊框裏使用漸變了。很是簡單，只要用較小的 z-index 設置僞元素就能夠了：瀏覽器

 
       01 
       .box { 
      
       02 
         margin: 80px 30px; 
      
       03 
         width: 200px; 
      
       04 
         height: 200px; 
      
       05 
         position: relative; 
      
       06 
         background: #fff; 
      
       07 
         float: left; 
      
       08 
       } 
      
       09 
       .box:before { 
      
       10 
             content: ''; 
      
       11 
             z-index: -1; 
      
       12 
             position: absolute; 
      
       13 
             width: 220px; 
      
       14 
             height: 220px; 
      
       15 
             top: -10px; 
      
       16 
             left: -10px; 
      
       17 
             background-image: linear-gradient(90deg, yellow, gold); 
      
       18 
       }

　　你能夠在這裏找到全部例子。使用 background-clip 和 background-origin 也能夠作到。在美好將來的某一天，border-image 屬性也會被全部瀏覽器支持，實現方法以下：svg

 
       1 
       .box { 
      
       2 
           border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%);  
      
       3 
           border-image-slice: 1; /* set internal offset */ 
      
       4 
       }

　　z-index 支持過渡　佈局

　　你可能不知道，可是 z-index 的確支持過渡了!它不會在每一步去改變值，所以你會認爲，它不會產生過渡。可是，它真的支持!這裏有個不錯的例子。

　　currentColor

　　咱們能夠用它檢測當前顏色值，這樣咱們就沒必要屢次定義它。

　　當和 SVG icon 一塊兒使用時最有幫助，它隨着父級元素顏色的改變而改變。一般，咱們的作法以下：

 
       01 
       .button { 
      
       02 
         color: black; 
      
       03 
       } 
      
       04 
       .button:hover { 
      
       05 
         color: red; 
      
       06 
       } 
      
       07 
       .button:active { 
      
       08 
         color: green; 
      
       09 
       } 
      
       10 
          
       11 
       .button svg { 
      
       12 
         fill: black; 
      
       13 
       } 
      
       14 
       .button:hover svg { 
      
       15 
         fill: red; 
      
       16 
       } 
      
       17 
       .button:active svg { 
      
       18 
         fill: green; 
      
       19 
       }

　　不過，咱們能夠用 currentColor 實現：

 
       01 
       svg {   
      
       02 
         fill: currentColor; 
      
       03 
       } 
      
       04 
          
       05 
       .button { 
      
       06 
         color: black; 
      
       07 
         border: 1px solid currentColor; 
      
       08 
       } 
      
       09 
       .button:hover { 
      
       10 
         color: red; 
      
       11 
       } 
      
       12 
       .button:active { 
      
       13 
         color: green; 
      
       14 
       }

　　關於僞元素的代碼：

 
       01 
       a {   
      
       02 
         color: #000; 
      
       03 
       } 
      
       04 
       a:hover {   
      
       05 
         color: #333; 
      
       06 
       } 
      
       07 
       a:active {   
      
       08 
         color: #666; 
      
       09 
       } 
      
       10 
          
       11 
       a:after,   
      
       12 
       a:hover:after,   
      
       13 
       a:active:after {   
      
       14 
         background: currentColor; 
      
       15 
         ... 
      
       16 
       }

　　object-fit

　　你還記得有時候你須要爲圖片設置 background-size 嗎，由於它會解決不少問題。如今你可使用 object-fit，webkit 支持它，很快也會被 Firefox 支持。

 
       01 
       .image__contain { 
      
       02 
         object-fit: contain;  
      
       03 
       }  
      
       04 
       .image__fill { 
      
       05 
         object-fit: fill;  
      
       06 
       } 
      
       07 
       .image__cover { 
      
       08 
         object-fit: cover;  
      
       09 
       } 
      
       10 
       .image__scale-down { 
      
       11 
         object-fit: scale-down; 
      
       12 
       }

　　示例。

　　單選、複選按鈕的樣式

　　咱們不使用任何圖片，來給某個複選按鈕設置樣式：

 
       1 
       <font size="3"><input id="check" name="check" type="checkbox"> 
      
       2 
       <label for="check">Checkbox</label></font>

 
       01 
       input[type=checkbox] {display: none;} 
      
       02 
          
       03 
       input[type=checkbox] + label:before {   
      
       04 
           content: ""; 
      
       05 
           border: 1px solid #000; 
      
       06 
           font-size: 11px;     
      
       07 
           line-height: 10px; 
      
       08 
           margin: 0 5px 0 0; 
      
       09 
           height: 10px; 
      
       10 
           width: 10px; 
      
       11 
           text-align: center; 
      
       12 
           vertical-align: middle; 
      
       13 
       } 
      
       14 
          
       15 
       input[type=checkbox]:checked + label:before {   
      
       16 
           content: "\2713"; 
      
       17 
       }

　　你能夠看到，僞元素和僞選擇器 :checked(IE9+)表現正常。在上面的示例代碼中，咱們隱藏了原始的複選按鈕，用咱們本身的代替。當被勾選時，咱們經過 content 顯示一個 Unicode 字符。

　　CSS 和 HTML 用到的 Unicode 字符不一樣。在 CSS 中，開頭是反斜槓，而後跟上十六進制的字符，而在 HTML 中，它是十進制的，形如 ✓ 。

　　咱們還能夠給複選按鈕加上動畫：

 
       1 
       input[type=checkbox] + label:before {   
      
       2 
           content: "\2713"; 
      
       3 
           color: transparent; 
      
       4 
           transition: color ease .3s; 
      
       5 
       } 
      
       6 
       input[type=checkbox]:checked + label:before {   
      
       7 
           color: #000; 
      
       8 
       }

　　下面是單選按鈕的動畫：

 
       01 
       <font size="3">input[type=radio] + label:before {   
      
       02 
           content: "\26AB"; 
      
       03 
           border: 1px solid #000; 
      
       04 
           border-radius: 50%; 
      
       05 
           font-size: 0;     
      
       06 
           transition: font-size ease .3s; 
      
       07 
       } 
      
       08 
       input[type=radio]:checked + label:before {   
      
       09 
           font-size: 10px;     
      
       10 
       }</font>

　　你能夠在這裏找到完整的 Unicode 清單，試着鼓搗下代碼吧。

　　CSS 中的counter

　　不是每一個人都知道 counter 能夠在 CSS 中設置：

 
       1 
       <ol class="list">   
      
       2 
           <li>a 
      
       3 
           </li><li>b 
      
       4 
           </li><li>c 
      
       5 
       </li></ol>

 
       1 
       .list { 
      
       2 
           counter-reset: i; //reset conunter 
      
       3 
       } 
      
       4 
       .list > li { 
      
       5 
           counter-increment: i; //counter ID 
      
       6 
       } 
      
       7 
       .list li:after { 
      
       8 
           content: "[" counter(i) "]"; //print the result 
      
       9 
       }

　　咱們在 counter-reset 屬性中定義了一個任意 ID 和初始值(默認爲 0)。你能夠在 counter-increment 中設置另外一個數字，它定義了計數器的步長。

　　好比，counter-increment: i 2 將只顯示偶數。

　　CSS 高級計數器

　　你還能夠累加被用戶選中的複選按鈕：

 
       01 
       <div class="languages">   
      
       02 
         <input id="c" type="checkbox"><label for="c">C</label> 
      
       03 
         <input id="C++" type="checkbox"><label for="C++">C++</label> 
      
       04 
         <input id="C#" type="checkbox"><label for="C#">C#</label> 
      
       05 
         <input id="Java" type="checkbox"><label for="Java">Java</label> 
      
       06 
         <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label> 
      
       07 
         <input id="PHP" type="checkbox"><label for="PHP">PHP</label> 
      
       08 
         <input id="Python" type="checkbox"><label for="Python">Python</label> 
      
       09 
         <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label> 
      
       10 
       </div>   
      
       11 
       <p class="total">   
      
       12 
         Total selected: 
      
       13 
       </p>

 
       1 
       .languages { 
      
       2 
         counter-reset: characters; 
      
       3 
       } 
      
       4 
       input:checked {   
      
       5 
         counter-increment: characters; 
      
       6 
       } 
      
       7 
       .total:after { 
      
       8 
         content: counter(characters); 
      
       9 
       }

　　咱們累加 input:checked 的值，並顯示出來，參看例子。

　　你還能開發出一個小型計算器呢：

 
       01 
       <div class="numbers">   
      
       02 
         <input id="one" type="checkbox"><label for="one">1</label> 
      
       03 
         <input id="two" type="checkbox"><label for="two">2</label> 
      
       04 
         <input id="three" type="checkbox"><label for="three">3</label> 
      
       05 
         <input id="four" type="checkbox"><label for="four">4</label> 
      
       06 
         <input id="five" type="checkbox"><label for="five">5</label> 
      
       07 
         <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label> 
      
       08 
       </div>   
      
       09 
       <p class="sum">   
      
       10 
         Sum  
      
       11 
       </p>

 
       01 
       .numbers { 
      
       02 
         counter-reset: sum; 
      
       03 
       } 
      
       04 
          
       05 
       #one:checked { counter-increment: sum 1; } 
      
       06 
       #two:checked { counter-increment: sum 2; } 
      
       07 
       #three:checked { counter-increment: sum 3; } 
      
       08 
       #four:checked { counter-increment: sum 4; } 
      
       09 
       #five:checked { counter-increment: sum 5; } 
      
       10 
       #one-hundred:checked { counter-increment: sum 100; } 
      
       11 
          
       12 
       .sum::after { 
      
       13 
         content: '= ' counter(sum); 
      
       14 
       }

　　運行原理同樣。這裏有在線 demo 和文章。

　　沒有圖片的菜單圖標

　　你還記得須要使用「三明治」圖標的頻率嗎?

　　至少有 3 種方法來繪製：

　　1.shadow

 
       01 
       .shadow-icon { 
      
       02 
         position: relative; 
      
       03 
         } 
      
       04 
         .shadow-icon:after { 
      
       05 
           content: ""; 
      
       06 
           position: absolute; 
      
       07 
           left: 0; 
      
       08 
           top: -50px; 
      
       09 
           height: 100%; 
      
       10 
           width: 100%; 
      
       11 
           box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000; 
      
       12 
           }

　　2.漸變

 
       1 
       .gradient-icon { 
      
       2 
           background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%); 
      
       3 
       }

　　3.UTF-8

　　你能夠只粘貼這個標準符號：☰ (Unicode: U+2630, HTML: ☰)。你能夠調整其顏色或尺寸，所以它沒有其它方法靈活。

　　看例子。

　　你還可使用帶有僞元素的 SVG、圖標字體或邊框。

　　 @Supports

　　CSS 有一些稱之爲 supports 的新表達式。如你所見，它能夠檢測瀏覽器是否支持所需選項。不是全部瀏覽器都支持它，可是你可將其用做簡單的檢查。

 
       01 
       @supports (display: flex) { 
      
       02 
           div { display: flex; } 
      
       03 
       } 
      
       04 
          
       05 
       /*You can check prefixes*/ 
      
       06 
       @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { 
      
       07 
           section { 
      
       08 
               display: -webkit-flex; 
      
       09 
               display: -moz-flex; 
      
       10 
               display: flex; 
      
       11 
               float: none; 
      
       12 
           } 
      
       13 
       }

　　visibility: visible

　　把 visibility: visible 的區塊設置爲 visibility: hidden，你對此有何見解?

 
       1 
       .hidden { 
      
       2 
         visibility: hidden; 
      
       3 
       } 
      
       4 
       .hidden .visible { 
      
       5 
         visibility: visible; 
      
       6 
       }

　　你或許認爲全部元素都將被隱藏，實際上，除了子元素顯示以外，父元素將隱藏全部元素。請看 demo。

　　position: sticky

　　咱們已經發現了一個新特性，如今你能夠建立「sticky」的區塊了。它們和 fixed 區塊表現同樣，可是不會隱藏另外一個區塊。你最好看下這裏。目前，只有 Mozilla 和 Safari 支持，可是你能夠用以下方式實現：

 
       1 
       .sticky { 
      
       2 
         position: static; 
      
       3 
         position: sticky; 
      
       4 
         top: 0px; 
      
       5 
       }

　　咱們將會在支持的瀏覽器裏獲得一個 sticky 區塊，而在其它瀏覽器裏獲得一個普通區塊。特別有利於移動網站，由於你須要建立一個可移動區塊且不影響其它元素。

　　新尺寸

　　最近，世界上找到了一種新方式，用來描述不一樣物體的尺寸。好比：

　　vw(視口寬度)：視口寬度，單位：1/100。
　　vh(視口高度)：視口高度，單位：1/100。
　　vmin 和 vmax：兩者都是相對於視口的寬度或高度，但前者老是相對於大的那個，後者老是相對於小的那個。

　　有意思的是，大部分現代瀏覽器都對它們支持很好，你能夠隨意使用。咱們爲何須要它們呢?由於它們讓全部的尺寸更簡單了。你沒必要定義父級元素尺寸的百分比或其它東東。看個例子：

 
       1 
       <font size="3">.some-text { 
      
       2 
           font-size: 100vh; 
      
       3 
           line-height: 100vh; 
      
       4 
       }</font>

　　或者，你在屏幕中央放置一個美麗的彈窗：

 
       1 
       .blackSquare { 
      
       2 
           background: black; 
      
       3 
           position: fixed; 
      
       4 
           height: 50vh; 
      
       5 
           width: 50vw; 
      
       6 
           left: 25vw; 
      
       7 
           top: 25vh; 
      
       8 
       }

　　這貌似是很酷的解決方案。請參考來自 Codepen 的例子。

　　在使用這個特性時，存在一些劣勢：

　　IE9 應該使用 vm 而不是 vmin。
　　iOS7 上的 vh，存在一些 bug。
　　vmax 還不被徹底支持。

　　文本修飾

　　咱們用數行代碼就能改變選中文本的顏色：

 
       1 
       *::selection { 
      
       2 
           color: #fff; 
      
       3 
           background: #000; 
      
       4 
       } 
      
       5 
       *::-moz-selection {     
      
       6 
           /*Only Firefox still needs a prefix*/ 
      
       7 
           color: #fff; 
      
       8 
           background: #000; 
      
       9 
       }

　　除了定義選中文本的顏色，還能定義陰影和背景。

　　觸摸設備上的塊滾動

　　若是頁面存在一些內部滾動的區塊，那麼除了添加 overflow: scroll / auto，還要添加這行代碼：

 
       1 
       -webkit-overflow-scrolling: touch;

　　問題在於，移動設備瀏覽器對於 overflow: scroll 屬性支持不夠好，會滾動整個頁面而不是指望的區塊。-webkit-overflow-scrolling 修復了這個問題。你能夠將其添加到你本身的項目中，看看效果。

　　使用硬件加速

　　有時候你的動畫可以減慢用戶電腦。爲了阻止這種狀況，你能夠針對特定區塊使用加速：

 
       1 
       .block { 
      
       2 
           transform: translatez(0); 
      
       3 
       }

　　你可能感覺不到變化，可是瀏覽器理解，這個元素應該被看作三維，而後開啓加速。若是針對 will-change 屬性的具體設計，沒有提供正常支持，這種方法就不太建議了。

　　類命名用 Unicode 字符

　　你能夠在以下代碼看到使用 Unicode 字符作類名：

　　只是開個玩笑。儘可能不要在大項目中使用，由於不是每一臺電腦都必定支持 UTF-8。

　　百分比表示的垂直邊距

　　事實上，垂直縮進是根據父元素的寬度、而非高度計算出來的。咱們建立兩個區塊：

 
       1 
       <div class="parent">   
      
       2 
           <div class="child"></div> 
      
       3 
       </div>

 
       01 
       .parent { 
      
       02 
           height: 400px; 
      
       03 
           width: 200px; 
      
       04 
       } 
      
       05 
       .child { 
      
       06 
           height: 50%; 
      
       07 
           padding-top: 25%; 
      
       08 
           padding-bottom: 25%; 
      
       09 
           width: 100%; 
      
       10 
       }

　　理論上，應該根據高度來填充父元素的，不過，咱們看看結果：

　　你應該記住，百分比是根據父元素的寬度計算出來的。

　　Firefox 下的 button 邊距

　　Firefox 尚未自身方法來計算 button 的邊距。貌似奇怪，可是你能夠手動添加。

　　還能夠這樣修復：

 
       1 
       button::-moz-focus-inner,   
      
       2 
       input[type="reset"]::-moz-focus-inner,   
      
       3 
       input[type="button"]::-moz-focus-inner,   
      
       4 
       input[type="submit"]::-moz-focus-inner {   
      
       5 
           border: none; 
      
       6 
           padding:0; 
      
       7 
       }

　　Color + Border = Border-Color

　　不是每一個人都明白，除了爲任何對象定義文本顏色，還能夠定義其邊框顏色：

 
       1 
       <font size="3">input[type="text"] {   
      
       2 
           color: red; 
      
       3 
           border: 1px solid; 
      
       4 
       }</font>

　　流金歲月

　　若是你仍然不得不支持 IE7 等相似狀況，那麼，你能夠用一個笑臉來定義其 hack：

　　很酷，對吧?