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

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

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

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

CSS 的偽元素是個(gè)很強(qiáng)大的東西，我們可以利用他做很多運(yùn)用，通常為了做一些效果，content:" " 多半會(huì)留空，但其實(shí)可以在里面寫(xiě)上 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 里面塞入我們?cè)?html 新增的 data-msg 屬性，這樣偽元素 (:after) 就會(huì)得到該值。

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

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

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

這樣做很方便。

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

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

:required?偽類(lèi)指定具有required 屬性的表單元素

:valid?偽類(lèi)指定一個(gè)通過(guò)匹配正確的所要求的表單元素

:invalid?偽類(lèi)指定一個(gè)不匹配指定要求的表單元素

 

    

      

        

          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表格紅綠相間，顯示的更加直觀(guān)

  

    

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

你也這樣來(lái)做，選擇5-10的子元素。

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

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

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

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

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


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

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

更多細(xì)節(jié)與討論請(qǐng)移步張?chǎng)涡窭蠋煹倪@篇文章：改變CSS世界縱橫規(guī)則的writing-mode屬性

需要為一個(gè)列表添加個(gè)動(dòng)畫(huà)，容器的高度是不確定的，也就是高度為 auto，懸浮時(shí)候撐開(kāi)內(nèi)容有個(gè)過(guò)渡動(dòng)畫(huà)

如下圖所示：

而用 CSS3 實(shí)現(xiàn)的話(huà)，由于高度的不確定，而 transtion 是需要具體的樹(shù)枝，所以設(shè)置 height:auto 是無(wú)法實(shí)現(xiàn)效果的，可以通過(guò) max-height 這個(gè)屬性間接的實(shí)現(xiàn)這么個(gè)效果，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 切換的時(shí)候，當(dāng)選中當(dāng)前項(xiàng)，禁用當(dāng)前標(biāo)簽的事件，只有切換其他 tab 的時(shí)候，才重新請(qǐng)求新的數(shù)據(jù)。

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

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

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

 

    

        aaa
    
    

         bbb
    
    

        ccc
     
    

   .active{
         pointer-events: none;
     }

好像沒(méi)什么效果?

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

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

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

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

  
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(不包括第一個(gè)li) 或者 .nav li:first-child ~ li(不包括最后一個(gè)li)， 但是使用 :not() 的意圖特別清晰，CSS選擇器按照人類(lèi)描述它的方式定義邊框。

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

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

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

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

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

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

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

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

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

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

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

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

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

這里只給一個(gè) 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單選框在線(xiàn)預(yù)覽地址：點(diǎn)擊我呀
美化checkbox復(fù)選框在線(xiàn)預(yù)覽地址：點(diǎn)擊我呀

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

設(shè)計(jì)師覺(jué)得默認(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;
}

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

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

html{
font-size: 100vw / 750
}

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

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

記得2008年時(shí)候汶川大地震時(shí)候，很多網(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)文字波浪線(xiàn)的強(qiáng)調(diào)效果，如圖所示

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