摘要：利用用和來做表單即時校驗(yàn)需求讓表單檢驗(yàn)變得簡單優(yōu)雅，不需要寫冗長的代碼來校驗(yàn)設(shè)置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細(xì)葉誰裁出，二月春風(fēng)似剪刀。首先，你需要先了解一下漸變的使用技巧。

之前不久，由于自己平時涉獵還算廣泛，總結(jié)了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑魔法小技巧，無奈我 CSS 一直很渣，沒什么干貨，最近寫了一個 Chrome 插件 GayHub，算是把 GitHub 的樣式審查了個變，在寫的過程中，也收獲了很多關(guān)于 CSS 的小技巧，尤其是開始的第一個技巧，學(xué)習(xí)到了很多，于是再加上一波搜集，就誕生這篇博文，歡迎補(bǔ)充~~~?。

鼠標(biāo)懸浮實(shí)現(xiàn)一個提示的文字，類似github的這種，如圖：

想必大家都想到了偽元素 after，但是文字怎么獲得呢，又不能用 JavaScript。

CSS 的偽元素是個很強(qiáng)大的東西，我們可以利用他做很多運(yùn)用，通常為了做一些效果，content:" " 多半會留空，但其實(shí)可以在里面寫上 attr 抓資料哦！

    hover

div {
  width: 100px;
  border: 1px solid red;
  position: relative;
}

div:hover:after {
  content: attr(data-msg);
  position: absolute;
  font-size: 12px;
  width: 200%;
  line-height: 30px;
  text-align: center;
  left: 0;
  top: 25px;
  border: 1px solid green;
}

在 attr 里面塞入我們在 html 新增的 data-msg 屬性，這樣偽元素 (:after) 就會得到該值。

同樣的，你還可以結(jié)合其他強(qiáng)大的選擇器使用，例如：使用屬性選擇器選擇空鏈接

顯示沒有文本值但是 href 屬性具有鏈接的 a 元素的鏈接：

a[href^="http"]:empty::before {
  content: attr(href);
}

這樣做很方便。

讓表單檢驗(yàn)變得簡單優(yōu)雅，不需要寫冗長的 JS 代碼來校驗(yàn)設(shè)置樣式

html5 豐富了表單元素，提供了類似 required,email,tel 等表單元素屬性。同樣的，我們可以利用 :valid 和 :invalid 來做針對html5表單屬性的校驗(yàn)。

:required?偽類指定具有required 屬性的表單元素

:valid?偽類指定一個通過匹配正確的所要求的表單元素

:invalid?偽類指定一個不匹配指定要求的表單元素

 

    

      

        

          name
          
        
        

          email
          
        
        

          homepage
          
        
        

          Comments
          
        
      
    
  

.valid {
  border-color: #429032;
  box-shadow: inset 5px 0 0 #429032;
}

.invalid {
  border-color: #D61D1D;
  box-shadow: inset 5px 0 0 #D61D1D;
}

.form-group {
  width: 32rem;
  padding: 1rem;
  border: 1px solid transparent;
  &:hover {
    border-color: #eee;
    transition: border .2s;
  }
  label {
    display: block;
    font-weight: normal;
  }
  input,
  textarea {
    display: block;
    width: 100%;
    line-height: 2rem;
    padding: .5rem .5rem .5rem 1rem;
    border: 1px solid #ccc;
    outline: none;
    &:valid {
      @extend .valid;
    }
    &:invalid {
      @extend .invalid;
    } 
  }
}

更多偽元素技巧可以參看這篇文章：你不知道的CSS

table表格紅綠相間，顯示的更加直觀

  

    

      
1
    
    

      
2
    
    

      
3
    
    

      
4
    
    

      
5
    
    

      
6
    
  

tbody tr:nth-of-type(2n){  
background-color: red;
}

tbody tr:nth-of-type(2n+1){
background-color: green;
}

你也這樣來做，選擇5-10的子元素。

table tr:nth-child(n+5):nth-child(-n+10) {
    background-color: red;
}

有時候，需要容器的文字從上到下排列，而不是從左往右排列，如圖所示：

這是segmentfault的回到頂部，他的實(shí)現(xiàn)很簡單，就是設(shè)置一定寬度讓其折行，如果我要實(shí)現(xiàn)這種需求呢？

writing-mode 這個 CSS 屬性，我們是不是很少見到，很少用到！我們往往稱不常見的東西為“生僻”，就像是不常見的文字我們叫“生僻字”，因此不常見的 CSS 屬性，我們可以叫做“生僻屬性”，writing-mode 給我們的感覺就是一個“生僻屬性”，很弱，可有可無。這個屬性可以追溯到 IE 5.5 時代，兼容性是相當(dāng)好的。

詠柳
碧玉妝成一樹高，
萬條垂下綠絲絳。
不知細(xì)葉誰裁出，
二月春風(fēng)似剪刀。


    
詠柳
    
碧玉妝成一樹高，
萬條垂下綠絲絳。
不知細(xì)葉誰裁出，
二月春風(fēng)似剪刀。

.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
}
/* IE7比較弱，需要做點(diǎn)額外的動作 */
.verticle-mode {
    *width: 120px;
}
.verticle-mode h4,
.verticle-mode p {
    *display: inline;
    *writing-mode: tb-rl;
}
.verticle-mode h4 {
    *float:right;
}

更多細(xì)節(jié)與討論請移步張鑫旭老師的這篇文章：改變CSS世界縱橫規(guī)則的writing-mode屬性

需要為一個列表添加個動畫，容器的高度是不確定的，也就是高度為 auto，懸浮時候撐開內(nèi)容有個過渡動畫

如下圖所示：

而用 CSS3 實(shí)現(xiàn)的話，由于高度的不確定，而 transtion 是需要具體的樹枝，所以設(shè)置 height:auto 是無法實(shí)現(xiàn)效果的，可以通過 max-height 這個屬性間接的實(shí)現(xiàn)這么個效果，css 樣式是這樣的：

  

    
 列表1 
    
列表內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容
  
  

    
 列表1 
    
列表內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容
  
  

    
 列表1 
    
列表內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容列表內(nèi)容
內(nèi)容
  

.bd {
  max-height:0;
  overflow:hidden;
  transition: all 1s ease-out;
}
li:hover .bd {
  max-height: 600px;
  transition-timing-function: ease-in;
}

跟前面 GIF 差不多，這里就不錄 GIF 了，有興趣的可以自己嘗試感受一下

在做 tab 切換的時候，當(dāng)選中當(dāng)前項(xiàng)，禁用當(dāng)前標(biāo)簽的事件，只有切換其他 tab 的時候，才重新請求新的數(shù)據(jù)。

pointer-events 是一個用于 HTML 指針事件的屬性。

pointer-events 可以禁用 HTML 元素的 hover/focus/active 等動態(tài)效果。

默認(rèn)值為 auto，語法：pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;

 

    

        aaa
    
    

         bbb
    
    

        ccc
     
    

   .active{
         pointer-events: none;
     }

好像沒什么效果?

紅框所在的文字有四個字的、三個字的、兩個字的，如果不兩端對齊可以選擇居中對齊，或者右對齊。但是如果要想文字兩端對齊呢？

姓名
手機(jī)號碼
驗(yàn)證碼
賬號
密碼

div{
margin:10px 0; 
width:100px;
border:1px solid red;
text-align-last: justify;
}

有時候?qū)Ш綑谛枰g需要用逗號,進(jìn)行隔離，但是最后一個不需要

  
a
  
b
  
c
  
d
  
e

li{
list-style:none;
margin-bottom:10px;
display:inline-block;
}

ul > li:not(:last-child)::after {
  content: ",";
}

當(dāng)然，你可以使用 .nav li + li(不包括第一個li) 或者 .nav li:first-child ~ li(不包括最后一個li)， 但是使用 :not() 的意圖特別清晰，CSS選擇器按照人類描述它的方式定義邊框。

或者，你已經(jīng)學(xué)習(xí)了一些關(guān)于 使用 :not()，你還可以嘗試：

/* 選擇1到3的元素并顯示 */
li:not(:nth-child(-n+3)){
  display: none;
}

在IOS機(jī)型中，非body元素的滾動條會非常不流暢，又不想用JS模擬滾動條。

傳統(tǒng) pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出現(xiàn)滾動條拖動顯示溢出的內(nèi)容，而移動web開發(fā)中，由于瀏覽器廠商的系統(tǒng)不同、版本不同，導(dǎo)致有部分機(jī)型尤其是 IOS 機(jī)型不支持彈性滾動，從而在開發(fā)中制造了所謂的 BUG。

body{
-webkit-overflow-scrolling: touch; /* ios5+ */
}
ele{
overflow:auto;
}

-webkit-overflow-scrolling屬性具有繼承效果，所以在 body 上設(shè)置即可，這樣局部滾動條就非常的流暢了。

所有滾動條都相當(dāng)?shù)牧鲿沉?/p> 10、美化瀏覽器自帶的 radio ，checkbox 屬性 需求

設(shè)計(jì)師：你那個單選框按鈕好丑啊，跟我的設(shè)計(jì)稿差好遠(yuǎn)。程序員：我有什么辦法，瀏覽器就是這樣的。。。

記得剛開始寫頁面時候，被瀏覽器各種默認(rèn)的 UI 樣式惡心到了，當(dāng)初確實(shí)也沒啥辦法，反正也不影響功能，就那樣吧。

先講一下原理：checkbox hack技術(shù)

我們使用 CSS 一些特殊的選擇器，然后配合單選框以及復(fù)選框自帶的一些特性，可以實(shí)現(xiàn)元素的顯示隱藏效果。然后通過一些簡單的擴(kuò)展，我們可以不使用任何 JavaScript 代碼實(shí)現(xiàn)類似：自定義的單復(fù)選框，“更多”展開與收起效果，選項(xiàng)卡切換效果，或是多級下拉列表效果等等。
相信很多前端開發(fā)人員都會遇到 boss 讓修改 checkbox 和 radio 樣式，畢竟自帶的樣式太丑了。后來我們發(fā)現(xiàn)修改自帶樣式并不是那么容易，最后直接使出殺手锏——點(diǎn)擊之后替換圖片。

今天教大家一種方法，不用替換圖片，隨意修改樣式。

先講一下原理：兩個關(guān)鍵東東，一是偽類選擇器 :checked，表示對應(yīng)控件元素（單選框或是復(fù)選框）選中時的樣式；二就是加號 + 相鄰兄弟選擇器，這個符號表示選擇后面的兄弟節(jié)點(diǎn)。于是，兩者配合，就可以輕松自如控制后面元素的顯示或者隱藏，或是其他樣式了。
而如何讓單復(fù)選框選中和不選中了，那就是 label 標(biāo)簽了哈，for 屬性錨定對應(yīng)的單選框或是復(fù)選框，然后點(diǎn)擊這里的 label 標(biāo)簽元素的時候，對應(yīng)的單復(fù)選框就會選中或是取消選中。然后，就有上面的效果啦！

這里只給一個 radio 單選框的代碼,僅供參考:

    
        前端工程師
        
        
    
    
        后端工程師
        
        
    
    
        全棧工程師
        
        
    

.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}

美化radio單選框在線預(yù)覽地址：點(diǎn)擊我呀
美化checkbox復(fù)選框在線預(yù)覽地址：點(diǎn)擊我呀

更多關(guān)于這方面的介紹和例子可以參看張鑫旭大神的這篇文章：CSS radio/checkbox單復(fù)選框元素顯隱技術(shù)

設(shè)計(jì)師覺得默認(rèn)的光標(biāo)顏色有點(diǎn)與整體設(shè)計(jì)風(fēng)格不符合，有點(diǎn)突兀，想換成紅色的

input {
  caret-color: auto;
  display: block;
  margin-bottom: .5em;
}

input.custom {
  caret-color: red;
}

這里不探討 rem 的原理以及細(xì)節(jié)，還不熟悉的童鞋建議去惡補(bǔ)一下。

有時候，移動端用 rem 布局時候，根據(jù)不同的屏幕寬度要設(shè)置不同的 font-size 來做到適配，要寫一坨 JS 來設(shè)置，能不能不用JS呢？

例如：以 750px 設(shè)計(jì)稿作為基準(zhǔn)，根節(jié)點(diǎn)設(shè)置 font-size 為 100px ,只考慮 DPR 為 2 的情況，只考慮最簡單的情況

 document.querySelector("html").style.fontSize = `${window.innerWidth / 7.5 }px`;

現(xiàn)在移動端 css3 單位 vw ,wh 兼容性已經(jīng)很不錯了，在不需要兼容太低版本的安卓機(jī)情況下可以這樣來：

html{
font-size: 100vw / 750
}

就這么簡單的設(shè)置，rem 就可以使用了

在不使用圖片的情況，實(shí)現(xiàn)一個簡單的三角形箭頭

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

復(fù)雜點(diǎn)的話，同樣的原理還可以實(shí)現(xiàn)一個五角星，原理都是利用 transparent 的透明屬性。

記得2008年時候汶川大地震時候，很多網(wǎng)站圖片都變成黑白色彩悼念逝者

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

實(shí)現(xiàn)文字波浪線的強(qiáng)調(diào)效果，如圖所示

?相信大家對于 text-decoration 這個屬性并不陌生，在重置 a 標(biāo)簽的默認(rèn)樣式時，我們經(jīng)常要這樣寫：text-decoration: none; 可能對它了解的人也很少，實(shí)際上 text-decoration 是一個復(fù)合屬性，由 line、style 和 color 組成。

??所以我們可以實(shí)現(xiàn)這樣的效果：

??可惜的是 line 只有 underline (下劃線)、overline (上劃線)和 line-through (刪除線)。如果突然需要下劃波浪線，怎么辦呢？不要急，神奇的 CSS 會幫你做到的。首先，你需要先了解一下漸變的使用技巧。

??說一下這里的思路，我們首先要用兩段漸變構(gòu)造一個基本元素："X"(這里我就不放圖了)，下一步就比較重要了，我們要截取"X"的上半部分，得到一個"V",從而結(jié)合 repeat 形成波浪線。下面是用 scss 寫的一個 mixin ，方便以后使用。

    @mixin waveline($color,$h) {
        position: relative;
        &::after {
            content: "";
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: $h;
            background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
                        linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
            background-size: $h * 2 $h * 2;
        }
    }

這些技巧在當(dāng)前版本的Chrome，Firefox， Safari， 以及Edge， 和IE11可以工作，移動端基本都沒問題，IE 重度開發(fā)者慎用。

相關(guān)兼容性自行查找：https://caniuse.com/

國服第一切圖仔的 CSS 倉庫：你想知道的 CSS 奇技淫巧，在這里，都有。iCSS -- interesting css

前端技術(shù)

受益頗多，所以推薦一波。?