靈活運用CSS開發技巧(66個實用技巧，值得收藏)

前言

何爲技巧，意指表如今文學、工藝、體育等方面的巧妙技能。代碼做爲一門現代高級工藝，推進着人類科學技術的發展，同時猶如文字同樣承託着人類文化的進步。

每寫好一篇文章，都會使用大量的寫做技巧。烘托、渲染、懸念、鋪墊、照應、伏筆、聯想、想象、抑揚結合、點面結合、動靜結合、敘議結合、情景交融、首尾呼應、陪襯對比、白描細描、比喻象徵、借古諷今、卒章顯志、承上啓下、開門見山、動靜相襯、虛實相生、實寫虛寫、託物寓意、詠物抒情等，這些應該都是咱們從小到大寫文章而接觸到的寫做技巧。

做爲程序猿的咱們，寫代碼一樣也須要大量的寫做技巧。一份良好的代碼能讓人耳目一新，讓人容易理解，讓人舒服天然，同時也讓本身成就感滿滿(哈哈，這個纔是重點)。所以，我整理下三年來本身使用到的一些CSS開發技巧，但願能讓你寫出耳目一新、容易理解、舒服天然的代碼。

目錄

既然寫文章有這麼多的寫做技巧，那麼我也須要對CSS開發技巧整理一下，起個易記的名字。

• Layout Skill：佈局技巧
• Behavior Skill：行爲技巧
• Color Skill：色彩技巧
• Figure Skill：圖形技巧
• Component Skill：組件技巧

備註

• 代碼只做演示用途，不會詳細說明語法
• 部分技巧示例代碼過長，使用CodePen進行保存，點擊在線演示便可查看
• 兼容項點擊連接便可查看當前屬性的瀏覽器兼容數據，自行根據項目兼容需求考慮是否使用
• 如下代碼所有基於CSS進行書寫，沒有任何JS代碼，沒有特殊說明的狀況下全部屬性和方法都是CSS類型
• 一部分技巧是本身探討出來的，另外一部分技巧是參考各位前端大神們的，都是一個互相學習的工程，你們一塊兒進步

Layout Skill

使用vw定製rem自適應佈局

• 要點：移動端使用rem佈局須要經過JS設置不一樣屏幕寬高比的font-size，結合vw單位和calc()可脫離JS的控制
• 場景：rem頁面佈局(不兼容低版本移動端系統)
• 兼容：vw、calc())

/* 基於UI width=750px DPR=2的頁面 */
html {
    font-size: calc(100vw / 7.5);
}

使用:nth-child()選擇指定元素

• 要點：經過:nth-child()篩選指定的元素設置樣式
• 場景：表格着色、邊界元素排版(首元素、尾元素、左右兩邊元素)
• 兼容：:nth-child())
• 代碼：在線演示

使用writing-mode排版豎文

• 要點：經過writing-mode調整文本排版方向
• 場景：豎行文字、文言文、詩詞
• 兼容：writing-mode
• 代碼：在線演示

使用text-align-last對齊兩端文本

• 要點：經過text-align-last:justify設置文本兩端對齊
• 場景：未知字數中文對齊
• 兼容：text-align-last
• 代碼：在線演示

使用:not()去除無用屬性

• 要點：經過:not()排除指定元素不使用設置樣式
• 場景：符號分割文字、邊界元素排版(首元素、尾元素、左右兩邊元素)
• 兼容：:not())
• 代碼：在線演示

使用object-fit規定圖像尺寸

• 要點：經過object-fit使圖像脫離background-size的約束，使用<img>來標記圖像背景尺寸
• 場景：圖片尺寸自適應
• 兼容：object-fit
• 代碼：在線演示

使用overflow-x排版橫向列表

• 要點：經過flexbox或inline-block的形式橫向排列元素，對父元素設置overflow-x:auto橫向滾動查看
• 場景：橫向滾動列表、元素過多但位置有限的導航欄
• 兼容：overflow-x
• 代碼：在線演示

使用text-overflow控制文本溢出

• 要點：經過text-overflow:ellipsis對溢出的文本在末端添加...
• 場景：單行文字溢出、多行文字溢出
• 兼容：text-overflow、line-clamp、box-orient
• 代碼：在線演示

使用transform描繪1px邊框

• 要點：分辨率比較低的屏幕下顯示1px的邊框會顯得模糊，經過::before或::after和transform模擬細膩的1px邊框
• 場景：容器1px邊框
• 兼容：transform
• 代碼：在線演示

使用transform翻轉內容

• 要點：經過transform:scale3d()對內容進行翻轉(水平翻轉、垂直翻轉、倒序翻轉)
• 場景：內容翻轉
• 兼容：transform
• 代碼：在線演示

使用letter-spacing排版倒序文本

• 要點：經過letter-spacing設置負值字體間距將文本倒序
• 場景：文言文、詩詞
• 兼容：letter-spacing
• 代碼：在線演示

使用margin-left排版左重右輕列表

• 要點：使用flexbox橫向佈局時，最後一個元素經過margin-left:auto實現向右對齊
• 場景：右側帶圖標的導航欄
• 兼容：margin
• 代碼：在線演示

Behavior Skill

使用overflow-scrolling支持彈性滾動

• 要點：iOS頁面非body元素的滾動操做會很是卡(Android不會出現此狀況)，經過overflow-scrolling:touch調用Safari原生滾動來支持彈性滾動，增長頁面滾動的流暢度
• 場景：iOS頁面滾動
• 兼容：iOS自帶-webkit-overflow-scrolling

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

使用transform啓動GPU硬件加速

• 要點：有時執行動畫可能會致使頁面卡頓，可在特定元素中使用硬件加速來避免這個問題
• 場景：動畫元素(絕對定位、同級中超過6個以上使用動畫)
• 兼容：transform

.elem {
    transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}

使用attr()抓取data-*

• 要點：在標籤上自定義屬性data-*，經過attr()獲取其內容賦值到content上
• 場景：提示框
• 兼容：data-*、attr())
• 代碼：在線演示

使用:valid和:invalid校驗表單

• 要點：<input>使用僞類:valid和:invalid配合pattern校驗表單輸入的內容
• 場景：表單校驗
• 兼容：pattern、:valid、:invalid
• 代碼：在線演示

使用pointer-events禁用事件觸發

• 要點：經過pointer-events:none禁用事件觸發(默認事件、冒泡事件、鼠標事件、鍵盤事件等)，至關於<button>的disabled
• 場景：限時點擊按鈕(發送驗證碼倒計時)、事件冒泡禁用(多個元素重疊且自帶事件、a標籤跳轉)
• 兼容：pointer-events
• 代碼：在線演示

使用+或~美化選項框

• 要點：<label>使用+或~配合for綁定radio或checkbox的選擇行爲
• 場景：選項框美化、選中項增長選中樣式
• 兼容：+、~
• 代碼：在線演示

使用:focus-within分發冒泡響應

• 要點：表單控件觸發focus和blur事件後往父元素進行冒泡，在父元素上經過:focus-within捕獲該冒泡事件來設置樣式
• 場景：登陸註冊彈框、表單校驗、離屏導航、導航切換
• 兼容：:focus-within、:placeholder-shown
• 代碼：在線演示

使用:hover描繪鼠標跟隨

• 要點：將整個頁面等比劃分紅小的單元格，每一個單元格監聽:hover，經過:hover觸發單元格的樣式變化來描繪鼠標運動軌跡
• 場景：鼠標跟隨軌跡、水波紋、怪圈
• 兼容：:hover
• 代碼：在線演示

使用max-height切換自動高度

• 要點：經過max-height定義收起的最小高度和展開的最大高度，設置二者間的過渡切換
• 場景：隱藏式子導航欄、懸浮式摺疊面板
• 兼容：max-height
• 代碼：在線演示

使用transform模擬視差滾動

• 要點：經過background-attachment:fixed或transform讓多層背景以不一樣的速度移動，造成立體的運動效果
• 場景：頁面滾動、視差滾動文字陰影、視差滾動文字虛影
• 兼容：background-attachment、transform
• 代碼：在線演示

使用animation-delay保留動畫起始幀

• 要點：經過transform-delay或animation-delay設置負值時延保留動畫起始幀，讓動畫進入頁面不用等待便可運行
• 場景：開場動畫
• 兼容：transform、animation
• 代碼：在線演示

使用resize拉伸分欄

• 要點：經過resize設置橫向自由拉伸來調整目標元素的寬度
• 場景：富文本編輯器、分欄閱讀
• 兼容：resize
• 代碼：在線演示

Color Skill

使用color改變邊框顏色

• 要點：border沒有定義border-color時，設置color後，border-color會被定義成color
• 場景：邊框顏色與文字顏色相同
• 兼容：color

.elem {
    border: 1px solid;
    color: #f66;
}

使用filter開啓悼念模式

• 要點：經過filter:grayscale()設置灰度模式來悼念某位去世的仁兄或悼念因災難而去世的人們
• 場景：網站悼念
• 兼容：filter
• 代碼：在線演示

使用::selection改變文本選擇顏色

• 要點：經過::selection根據主題顏色自定義文本選擇顏色
• 場景：主題化
• 兼容：::selection
• 代碼：在線演示

使用linear-gradient控制背景漸變

• 要點：經過linear-gradient設置背景漸變色並放大背景尺寸，添加背景移動效果
• 場景：主題化、彩虹背景牆
• 兼容：gradient、animation
• 代碼：在線演示

使用linear-gradient控制文本漸變

• 要點：經過linear-gradient設置背景漸變色，配合background-clip:text對背景進行文本裁剪，添加濾鏡動畫
• 場景：主題化、特點標題
• 兼容：gradient、background-clip、filter、animation、text-fill-color
• 代碼：在線演示

使用caret-color改變光標顏色

• 要點：經過caret-color根據主題顏色自定義光標顏色
• 場景：主題化
• 兼容：caret-color
• 代碼：在線演示

使用::scrollbar改變滾動條樣式

• 要點：經過scrollbar的scrollbar-track和scrollbar-thumb等屬性來自定義滾動條樣式
• 場景：主題化、頁面滾動
• 兼容：::scrollbar
• 代碼：在線演示

使用filter模擬Instagram濾鏡

• 要點：經過filter的濾鏡組合起來模擬Instagram濾鏡
• 場景：圖片濾鏡
• 兼容：filter
• 代碼：在線演示、css-gram

Figure Skill

使用div描繪各類圖形

• 要點：<div>配合其僞元素(::before、::after)經過clip、transform等方式繪製各類圖形
• 場景：各類圖形容器
• 兼容：clip、transform
• 代碼：在線演示

使用mask雕刻鏤空背景

• 要點：經過mask爲圖像背景生成蒙層提供遮罩效果
• 場景：高斯模糊蒙層、票劵(電影票、購物卡)、遮罩動畫
• 兼容：mask、perspective、transform-style、animation
• 代碼：在線演示

使用linear-gradient描繪波浪線

• 要點：經過linear-gradient繪製波浪線
• 場景：文字強化顯示、文字下劃線、內容分割線
• 兼容：gradient
• 代碼：在線演示

使用linear-gradient描繪綵帶

• 要點：經過linear-gradient繪製間斷顏色的綵帶
• 場景：主題化
• 兼容：gradient
• 代碼：在線演示

使用conic-gradient描繪餅圖

• 要點：經過conic-gradient繪製多種色彩的餅圖
• 場景：項佔比餅圖
• 兼容：gradient
• 代碼：在線演示

使用linear-gradient描繪方格背景

• 要點：使用linear-gradient繪製間斷顏色的綵帶進行交互生成方格
• 場景：格子背景、佔位圖
• 兼容：gradient
• 代碼：在線演示

使用box-shadow描繪單側投影

• 要點：經過box-shadow生成投影，且模糊半徑和負的擴張半徑一致，使投影偏向一側
• 場景：容器投影、背景補間動畫1、背景補間動畫2、立體投影、文字立體投影、文字漸變立體投影、長投影、霓虹燈、燈光陰影
• 兼容：box-shadow、filter、text-shadow
• 代碼：在線演示

使用filter描繪頭像彩色陰影

• 要點：經過filter:blur() brightness() opacity()模擬陰影效果
• 場景：頭像陰影
• 兼容：filter
• 代碼：在線演示

使用box-shadow裁剪圖像

• 要點：經過box-shadow模擬蒙層實現中間鏤空
• 場景：圖片裁剪、新手引導、背景鏤空、投射定位
• 兼容：box-shadow
• 代碼：在線演示

使用outline描繪內邊框

• 要點：經過outline設置輪廓進行描邊，可設置outline-offset設置內描邊
• 場景：內描邊、外描邊
• 兼容：outline
• 代碼：在線演示

Component Skill

迭代計數器

• 要點：累加選項單位的計數器
• 場景：章節目錄、選項計數器、加法計數器
• 兼容：counters
• 代碼：在線演示

下劃線跟隨導航欄

• 要點：下劃線跟隨鼠標移動的導航欄
• 場景：動態導航欄
• 兼容：+
• 代碼：在線演示

氣泡背景牆

• 要點：不間斷冒出氣泡的背景牆
• 場景：動態背景
• 兼容：animation
• 代碼：在線演示

滾動指示器

• 要點：提示滾動進度的指示器
• 場景：閱讀進度
• 兼容：calc())、gradient
• 代碼：在線演示

故障文本

• 要點：顯示器故障形式的文本
• 場景：錯誤提示
• 兼容：data-*、attr())、animation
• 代碼：在線演示

換色器

• 要點：經過拾色器改變圖像色相的換色器
• 場景：圖片色彩變換
• 兼容：mix-blend-mode
• 代碼：在線演示

狀態懸浮球

• 要點：展現當前狀態的懸浮球
• 場景：狀態動態顯示、波浪動畫
• 兼容：gradient、animation
• 代碼：在線演示

粘粘球

• 要點：相交粘粘效果的雙球回彈運動
• 場景：粘粘動畫
• 兼容：filter、animation
• 代碼：在線演示

商城票券

• 要點：邊緣帶孔和中間摺痕的票劵
• 場景：電影票、代金券、消費卡
• 兼容：gradient
• 代碼：在線演示

倒影加載條

• 要點：帶有漸變倒影的加載條
• 場景：加載提示
• 兼容：box-reflect、animation
• 代碼：在線演示

三維立方體

• 要點：三維建模的立方體
• 場景：三維建模
• 兼容：transform、perspective、transform-style、animation
• 代碼：在線演示

動態邊框

• 要點：鼠標懸浮時動態漸變顯示的邊框
• 場景：懸浮按鈕、邊框動畫
• 兼容：gradient
• 代碼：在線演示

標籤頁

• 要點：可切換內容的標籤頁
• 場景：內容切換
• 兼容：scroll-behavior
• 代碼：在線演示

標籤導航欄

• 要點：可切換內容的導航欄
• 場景：頁面切換
• 兼容：~
• 代碼：在線演示

摺疊面板

• 要點：可摺疊內容的面板
• 場景：隱藏式子導航欄
• 兼容：~
• 代碼：在線演示

星級評分

• 要點：點擊星星進行評分的按鈕
• 場景：評分
• 兼容：~
• 代碼：在線演示

加載指示器

• 要點：變換...長度的加載提示
• 場景：加載提示
• 兼容：animation
• 代碼：在線演示

自適應相冊

• 要點：自適應照片數量的相冊
• 場景：九宮格相冊、微信相冊、圖集
• 兼容：:only-child、:first-child、:nth-child())、:nth-last-child())、~
• 代碼：在線演示

圓角進度條

• 要點：單一顏色的圓角進度條
• 場景：進度條
• 兼容：gradient
• 代碼：在線演示

螺紋進度條

• 要點：漸變螺紋的進度條
• 場景：進度條、加載動畫
• 兼容：gradient、animation
• 代碼：在線演示

立體按鈕

• 要點：點擊呈現按下狀態的按鈕
• 場景：按鈕點擊
• 兼容：box-shadow
• 代碼：在線演示

混沌加載圈

• 要點：帶混沌虛影的加載圈
• 場景：加載提示
• 兼容：filter、animation
• 代碼：在線演示

蛇形邊框

• 要點：蛇形運動的邊框
• 場景：蛇形動畫
• 兼容：clip、animation
• 代碼：在線演示

自動打字

• 要點：逐個字符自動打印出來的文字
• 場景：代碼演示、文字輸入動畫
• 兼容：ch、animation
• 代碼：在線演示

結語

寫到最後總結得差很少了，後續若是我想起還有哪些CSS開發技巧遺漏的，會繼續在這篇文章上補全，同時也但願各位朋友對文章裏的要點進行補充或者提出本身的看法。歡迎在下方進行評論或補充喔，喜歡的點個贊或收個藏，保證你在開發時用得上。

最後送你們一個鍵盤！

(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()

專欄文章

《靈活運用》系列

• 靈活運用JS開發技巧 強烈推薦收藏👍

《必備工具》系列

• Cmder&iTerm美化你的終端 強烈推薦收藏👍

《隨筆》系列

• 前端性能優化指南 強烈推薦收藏👍
• 詳細判斷瀏覽器運行環境 強烈推薦收藏👍
• H5與App的通信方式 強烈推薦收藏👍
• 1.5萬字歸納ES6所有特性 強烈推薦收藏👍

關注公衆號Uzero，更多前端小乾貨等着你喔！我是JowayYoung，喜歡分享前端技術和生活紀事，學習與生活不落下，天天進步一點點，與你們相伴成長