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