前言
何為技巧，意指表現(xiàn)在文學、工藝、體育等方面的巧妙技能。代碼作為一門現(xiàn)代高級工藝，推動著人類科學技術(shù)的發(fā)展，同時猶如文字一樣承托著人類文化的進步。
每寫好一篇文章，都會使用大量的寫作技巧。烘托、渲染、懸念、鋪墊、照應(yīng)、伏筆、聯(lián)想、想象、抑揚結(jié)合、點面結(jié)合、動靜結(jié)合、敘議結(jié)合、情景交融、首尾呼應(yīng)、襯托對比、白描細描、比喻象征、借古諷今、卒章顯志、承上啟下、開門見山、動靜相襯、虛實相生、實寫虛寫、托物寓意、詠物抒情等，這些應(yīng)該都是我們從小到大寫文章而接觸到的寫作技巧。
作為程序猿的我們，寫代碼同樣也需要大量的寫作技巧。一份良好的代碼能讓人耳目一新js自定義滾動條樣式，讓人容易理解，讓人舒服自然，同時也讓自己成就感滿滿(哈哈，這個才是重點)。因此js自定義滾動條樣式，我整理下三年來自己使用到的一些CSS開發(fā)技巧，希望能讓你寫出耳目一新、容易理解、舒服自然的代碼。
目錄
既然寫文章有這么多的寫作技巧，那么我也需要對CSS開發(fā)技巧整理一下，起個易記的名字。
備注
Skill使用vw定制rem自適應(yīng)布局
/*?基于UI?width=750px?DPR=2的頁面?*/
html?{
????font-size:?calc(100vw?/?7.5);
}
使用:nth-child()選擇指定元素
在線演示使用-mode排版豎文
在線演示使用text-align-last對齊兩端文本
在線演示使用:not()去除無用屬性
在線演示使用-fit規(guī)定圖像尺寸
在線演示使用-x排版橫向列表
在線演示使用text-控制文本溢出
在線演示使用描繪1px邊框
在線演示使用翻轉(zhuǎn)內(nèi)容
在線演示使用-排版倒序文本
在線演示使用-left排版左重右輕列表
在線演示 Skill使用-支持彈性滾動
body?{
????-webkit-overflow-scrolling:?touch;
}
.elem?{
????overflow:?auto;
}
使用啟動GPU硬件加速
.elem?{
????transform:?translate3d(0,?0,?0);?/*?translateZ(0)亦可?*/
}
使用attr()抓取data-*
在線演示使用:valid和:校驗表單
在線演示使用-禁用事件觸發(fā)
在線演示使用+或~美化選項框
在線演示使用:focus-分發(fā)冒泡響應(yīng)
在線演示使用:hover描繪鼠標跟隨
在線演示使用max-切換自動高度
在線演示使用模擬視差滾動
在線演示使用-delay保留動畫起始幀
在線演示使用拉伸分欄
在線演示Color Skill使用color改變邊框顏色
.elem?{
????border:?1px?solid;
????color:?#f66;
}
在線演示使用開啟悼念模式
在線演示使用::改變文本選擇顏色
在線演示使用-控制背景漸變
在線演示使用-控制文本漸變
在線演示使用caret-color改變光標顏色
在線演示使用:改變滾動條樣式
在線演示使用模擬濾鏡
在線演示 Skill使用div描繪各種圖形使用mask雕刻鏤空背景
在線演示使用-描繪波浪線
在線演示使用-描繪彩帶
在線演示使用conic-描繪餅圖
在線演示使用-描繪方格背景
在線演示使用box-描繪單側(cè)投影
在線演示使用描繪頭像彩色陰影
在線演示使用box-裁剪圖像
在線演示使用描繪內(nèi)邊框
在線演示 Skill迭代計數(shù)器
在線演示下劃線跟隨導(dǎo)航欄
在線演示氣泡背景墻
在線演示滾動指示器
在線演示故障文本
在線演示換色器
在線演示懸浮狀態(tài)球
在線演示粘粘球
在線演示商城票券
在線演示倒影加載條
在線演示三維立方體
在線演示動態(tài)邊框
在線演示標簽頁
在線演示標簽導(dǎo)航欄
在線演示折疊面板
在線演示星級評分
在線演示加載指示器
在線演示自適應(yīng)相冊
在線演示圓角進度條
在線演示螺紋進度條
在線演示立體按鈕
在線演示混沌加載圈
在線演示蛇形邊框
在線演示自動打字
在線演示結(jié)語
寫到最后總結(jié)得差不多了，后續(xù)如果我想起還有哪些CSS開發(fā)技巧遺漏的，會繼續(xù)在這篇文章上補全，同時也希望各位倔友對文章里的要點進行補充或者提出自己的見解。歡迎在下方進行評論或補充喔，喜歡的點個贊或收個藏，保證你在開發(fā)時用得上。
最后送大家一個鍵盤！
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x2 :'?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`
`)()
完
往期精彩回顧