前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)

可能我們有時(shí)候潛意識里認(rèn)為, 當(dāng)前實(shí)際開發(fā)中css屬性已經(jīng)足夠用了, 但是前段時(shí)間突然想到:"會(huì)不會(huì)我們只是思維被限制在了常用的css屬性中, 從而喪失了創(chuàng)造力", 就像發(fā)明 車 之前大多數(shù)人會(huì)認(rèn)為 騎馬 已經(jīng)足夠快可以滿足自己的需求了, 所以我專門整理了一下自己的學(xué)習(xí)筆記并且專門去學(xué)習(xí)了一些冷門的css屬性, 果然收獲滿滿, 所以今天也要在這里把這些腦洞大開的屬性較少給你, 準(zhǔn)備好一起來感受css的魅力吧。

一、開胃菜 css畫背景圖: paint

??? 我們開發(fā)中使用的背景圖大部分是(png, webp等)圖片、svg矢量圖、canvas畫圖, 但是其實(shí)我們也可以選擇css直接畫圖, 那css這種甚至都"稱不上"編程語言的家伙怎么繪制復(fù)雜的圖片那?【推薦學(xué)習(xí)：css視頻教程】

1: 為元素賦予css屬性

div class="box"></div>

.box {     width: 180px;     height: 180px;     border: 1px solid;      background: paint(xxxx); // 主角在此   }

??? paint(xxxx); 這里填入的是繪圖的"方法名", 往下看就知道啥是"方法名"了, 之所以我這里寫"xxxx"非常隨意, 是因?yàn)槲蚁氡磉_(dá)這個(gè)名字隨便起。

2: 引入js文件

    <script>       if (window.CSS) {         // 因?yàn)榧虞d文件 需要啟動(dòng)server         CSS.paintWorklet.addModule("./paint-grid.js");       }     </script>

??? 用法有點(diǎn)詭異, 但核心其實(shí)是引入了一個(gè)js文件。

3: js文件內(nèi)定義導(dǎo)出的方法

??? paint-grid.js文件:

registerPaint(   "xxxx", // 這就是: 方法名   class {     paint(context, size) {       context.fillStyle = 'red';       context.fillRect(10, 10, 39, 39);     }   } );

??? paint方法里面就類似canvas了, 可以正常使用部分js代碼。

??? 當(dāng)前的效果展示:

4: 可多導(dǎo)出

??? 當(dāng)看到需要指定繪制的"方法名"而不是"文件名", 我就知道他一定可以導(dǎo)出多個(gè)嘍:

registerPaint(   "xxxx1",   class {     paint(context, size) {       context.fillStyle = 'red';       context.fillRect(10, 10, 39, 39);     }   } );  registerPaint(   "xxxx2",   class {     paint(context, size) {       context.fillStyle = 'green';       context.fillRect(10, 10, 39, 39);     }   } );

兩個(gè)元素的樣式設(shè)置

      .box {         background: paint(xxxx1);       }       .box2 {         margin-top: 20px;         background: paint(xxxx2);       }

5: 變量賦予背景靈動(dòng)

??? 我們時(shí)長遇到需要繪制"非固定大小背影", 此時(shí)在paint-grid.js中window是獲取不到的, 但是我們可以使用css變量:

// 在全局定義方便js修改   :root {     --bg-size: 60;   }

??? paint-grid.js文件

registerPaint(   "xxxx1",   class {     static get inputProperties() {       return ["--bg-size"];     }     paint(context, size, properties) {       var bgSize = properties.get('--bg-size');       context.fillStyle = "red";       context.fillRect(10, 10, bgSize, bgSize);     }   } );

??? inputProperties定義了需要獲取哪些屬性, paint的第三個(gè)參數(shù)可以接收這些屬性, 這樣瞬間就感覺這個(gè)屬性還有點(diǎn)用啦。

6: 注意事項(xiàng)

• 不能在js文件的繪制方法里面寫alert, 會(huì)導(dǎo)致報(bào)錯(cuò)阻斷繪制:
  

• 要注意維護(hù) paint-grid.js文件與css文件的相關(guān)性, 因?yàn)榇蠹覍懘a會(huì)下意識的不會(huì)認(rèn)為js方法被css文件里的屬性所使用, 這就導(dǎo)致可能后續(xù)無刪除或者是不敢刪除等問題。

• 適合處理簡單的圖形, 如果復(fù)雜度高了或者還需借助其他"庫"的情況, 則不建議使用。

二、字體三連 (鏤空、漸變、背景)

1: 鏤空字不算罕見

  p {     font-size: 150px;     color: white;     -webkit-text-stroke: 6px red;   }

2: 漸變色文字

      p {         font-size: 150px;         color: white;         -webkit-text-stroke: 6px red;         background-color: rosybrown;         background-image: -webkit-linear-gradient(top, red, #fd8403, yellow);         -webkit-background-clip: text;         color: transparent;       }

 <p>   高   <br>   低  </p>

3: 文字背景

???我們把"白金之星"(jojo的奇妙冒險(xiǎn)中的'人物')的圖片作為文字的背景:

      div {         font-size: 150px;         background: url(../imgs/jojo.webp) no-repeat;         background-size: 100%;         background-origin: border-box;         -webkit-background-clip: text;         color: transparent;       }

??? 這里的關(guān)鍵點(diǎn)是-webkit-background-clip: text, 意思是將dom內(nèi)文字以外的區(qū)域裁剪掉, 所以就剩文字區(qū)域了, 然后文字再設(shè)置成透明的。

三、他來了他來了, 他帶著炫酷的過場動(dòng)畫走來了

??? 先看一下咱們用css字體屬性做的動(dòng)動(dòng)畫效果:

??? 倒計(jì)時(shí)骨王登場:

??? 這里的思路就是利用文字的背景圖屬性, 但是難點(diǎn)是如何讓文字變大。

1: 難點(diǎn)與坑點(diǎn)

??? 文字變大有什么難的? 你可能會(huì)說這些so簡單, 我們設(shè)置文字所在的span標(biāo)簽position: absolute;定位在父級中間不就OK了? 但是如果這樣設(shè)置就會(huì)導(dǎo)致-webkit-background-clip: text;失效, 也就是文本脫離了文檔流。

??? 有同學(xué)有會(huì)想到 transform:scale(1.5); 來動(dòng)態(tài)控制文字的變大, 但是transform依然會(huì)使-webkit-background-clip: text;失效。

??? 所以我想到的是在div中設(shè)置flex讓文字上下左右居中, 然后調(diào)大font-size屬性。

??? 還有一個(gè)問題就是背景色問題, 因?yàn)樵O(shè)置了背景圖的同時(shí)沒法設(shè)置文字外層的背景色。

2: 實(shí)現(xiàn)思路

??? 首先總共需要三層結(jié)構(gòu), 第一層wrap負(fù)責(zé)黑色背景色以及overflow: hidden;來截?cái)辔覀兊奈淖肿兇? 第二層box負(fù)責(zé)文字的居中, 并且設(shè)置font-size屬性讓內(nèi)部元素繼承, 第三層span標(biāo)簽負(fù)責(zé)文字①②③的存放, 因?yàn)橐刂七@些文字的顯隱所以需要dom標(biāo)簽包裹。

3: 實(shí)現(xiàn)代碼

??? 代碼有些粗鄙沒有潤色

<!DOCTYPE html> <html>   <head>     <style>       #wrap {         background-color: black;         width: 500px;         height: 500px;         margin: 0 auto;         overflow: hidden;       }       .box0 {         background: url(../imgs/jojo.webp) no-repeat;       }       .box1 {         background: url(../imgs/一起干飯.jpeg) no-repeat;       }       .box2 {         background: url(../imgs/gat.webp) no-repeat;       }       #box {         width: 500px;         height: 500px;         font-size: 150px;         margin: 0 auto;         background-size: 500px 500px;         background-position: center;         -webkit-background-clip: text;         -webkit-text-fill-color: rgba(0, 0, 0, 0.2);         display: flex;         justify-content: center;         align-items: center;       }       .text {         display: none;       }     </style>   </head>   <body>     <div id="wrap">       <div id="box">         <span>①</span>         <span>②</span>         <span>③</span>       </div>     </div>     <script>       const oBox = document.getElementById("box");       const textArr = document.getElementsByClassName('text')        let i = 0;       let n = 800;       setInterval(()=>{         oBox.style.fontSize = n + 'px';          n+=3          if(n > 800){             n = 10;             textArr[1].style.display = 'none'             textArr[2].style.display = 'none'             textArr[0].style.display = 'none'             textArr[i].style.display = 'block'             oBox.classList.remove('box1')             oBox.classList.remove('box2')             oBox.classList.remove('box3')             oBox.classList.add(`box${i}`)             i++             if(i > 2){               i = 0             }          }       },5)     </script>   </body> </html>

??? 把文案改成 "◤ ◢ ?" 就會(huì)出現(xiàn)第一個(gè)動(dòng)圖的效果啦!

四、引號: quotes

??? 所謂引號就相當(dāng)于給書名加上'書名號', 給語言加上'冒號雙引號', 當(dāng)然他還有一些神奇玩法。

1: 基本使用

 <div class="box">jojo的奇妙冒險(xiǎn)</div>

    <style>       .box {         quotes: "《" "》";       }       .box::before {         content: open-quote;       }       .box:after {         content: close-quote;       }     </style>

效果圖:

??? 這里要注意的是如果沒寫content: open-quote;會(huì)導(dǎo)致前后'書名號'都消失, 但是唯獨(dú)沒寫content: close-quote;則會(huì)保留展示"《"。

2: 看似雞肋?

??? 當(dāng)前這個(gè)基礎(chǔ)寫法也太雞肋了, 不就是給"《"起了個(gè)別名叫open-quote嗎? 并且關(guān)鍵是占用了我的before與after, 感覺畫蛇添足, 比如我可以用如下的方法進(jìn)行替換:

  :root {     --open: "《";     --close: "》";   }   div::before {     content: var(--open);   }   div::after {     content: var(--close);   }

<div class="box">jojo的奇妙冒險(xiǎn)</div>

3: 套娃高手 quotes 雄起

???其實(shí)quotes的看家本領(lǐng)是它可以接受n個(gè)參數(shù)!

  .box {     quotes: "--- start" "---- end" "《" "》";   }   .box::before {     content: open-quote;   }   .box:after {     content: close-quote;   }

    <div class="box">         <div class="box">jojo的奇妙冒險(xiǎn)</div>         <div class="box">Overlord</div>         <div class="box">艾爾登法環(huán)</div>     </div>

???神奇的事情出現(xiàn)了, 當(dāng)出現(xiàn)嵌套結(jié)構(gòu)的時(shí)候, 內(nèi)部的元素會(huì)使用第三個(gè)與第四個(gè)參數(shù)作為"引號", 套娃事件出現(xiàn)啦:

  .box {     quotes: "--- start" "---- end" "(" ")" "《" "》";   }   .box::before {     content: open-quote;   }   .box:after {     content: close-quote;   }

<div class="box">   <div class="box">     <span class="box">jojo的奇妙冒險(xiǎn)</span>   </div>   <div class="box">     <span class="box">Overlord</span>   </div>   <div class="box">     <span class="box">艾爾登法環(huán)</span>   </div> </div>

??? 說實(shí)話這個(gè)套娃能力還挺厲害的, 并且我們可以講 close-quote屬性置空, 我想到的就是列表:

  .box {     quotes: "--- start" "---- end" "1: " "" "-- 2:" "" "---- 3: " "" "------ 4: " "";   }   .box::before {     content: open-quote;   }   .box:after {     content: close-quote;   }

    <div class="box">       <div class="box">         第一:         <div class="box">           第二:           <div class="box">第三:</div>         </div>         <div class="box">           第二:           <div class="box">             第三:             <div class="box">第四:</div>           </div>         </div>       </div>       <div class="box">         第一:         <div class="box">第二:</div>       </div>     </div>

???要注意不寫close-quote會(huì)讓css找不到在哪里結(jié)束, 所以最好寫上并給空值。

五、還原大師: all

CSS all 簡寫屬性 將除了 unicode-bidi 與 direction 之外的所有屬性重設(shè)至其初始值，或繼承值。

???這是一個(gè)比較強(qiáng)硬的屬性, 可以把幾乎所有css屬性進(jìn)行重置:

???我們先設(shè)置一下基礎(chǔ)的環(huán)境

  .wrap {     font-size: 30px;     font-weight: 900;   }   .box {     width: 100px;     height: 100px;     border: 1px solid;     background-color: red;     color: white;   }   .box1 {     all: initial;   }   .box2 {     all: inherit;   }   .box3 {     all: revert;   }

  <body>     <div class="wrap">       <div class="box">你好</div>       <div class="box box1">你好: initial</div>       <div class="box box2">你好: inherit</div>       <div class="box box3">你好: revert</div>     </div>   </body>

1: initial : 還原為初始值

顧名思義這里是將 div身上的所有屬性都重置了, 不管是"背景顏色"還是"字體顏色", 甚至寬高, 所以這里屬于是完全初始化了。

???但是有個(gè)大坑, 他會(huì)把div原本的display: block改變成display: inline, 也就是說all: initial;將所有屬性置為空了, 而不會(huì)根據(jù)標(biāo)簽屬性進(jìn)行篩選, 所以這個(gè)屬性有點(diǎn)太絕對了要小心使用。

2: inherit: 集成值保留

???依然是顧名思義, 將所有屬性設(shè)置為 "繼承父級", 并且還原自身的屬性, 比如寬高都沒有了但是繼承了字體大小與字體粗細(xì)。

???不是所有css屬性的默認(rèn)值都是'繼承', 比如說position的默認(rèn)值就不是集成, 但是position可以設(shè)置為position: inherit;, 這就埋下了隱患請看下一條屬性。

3: revert: 還原

???雖然看起來效果與inherit幾乎一樣, 但是實(shí)質(zhì)上有大區(qū)別, 比如如果此時(shí)wrap父元素設(shè)置position: absolute;, 那么設(shè)置了all: inherit的元素為position: absolute;, 設(shè)置了all:revert的元素是position: static, 也就是說目標(biāo)元素單純的還原成最開始的樣式, 剔除掉了后期設(shè)置的屬性, 但保留一些默認(rèn)的繼承屬性, 這個(gè)屬性雖然兼容性超差但最牛!

4: all的優(yōu)先級

.box{     all: revert;     background-color: red; }

??? 這里的背景色是可以設(shè)置成功的, 所以all應(yīng)該算一錘子買賣, 只把設(shè)置all屬性之前的樣式重置。

// 父級   .box {     background-color: red !important;   }  .box1 {    all: revert;  }

??? 上面是不生效的, 因?yàn)?code>all只能重置優(yōu)先級不如自己選擇器的屬性, 所以需要all: revert!important;。

六、目標(biāo)元素樣式 :target

??? 這個(gè)屬性讓頁面的url參數(shù)與dom元素互動(dòng)起來

1: 跳轉(zhuǎn)選中

??? 比如當(dāng)前url是https://www.xxxxxxxxxxx.com/#target_id則:

  :target {     background-color: red;     font-size: 200px;   }

<div id="target_id">     你好 </div>

2: 跳轉(zhuǎn)后動(dòng)畫

??? 我想到的是每次選中元素后讓元素有個(gè)動(dòng)畫效果, 實(shí)在太簡單了就不演示了, 說一下這個(gè)屬性的雞肋點(diǎn)吧, 比如無法同時(shí)傳遞多個(gè)id, 或者傳遞class, 并且他讓css屬性與dom結(jié)構(gòu)之間綁定關(guān)系變?nèi)趿舜a不方便維護(hù)與閱讀。

七、輸入框的placeholder樣式設(shè)置: placeholder-shown

??? 可以設(shè)置當(dāng)input組件中展示placeholder時(shí)的樣式:

      input:placeholder-shown {         background-color: lightblue;       }        input {         width: 300px;         height: 60px;       }

 <input placeholder="展示我時(shí)為藍(lán)色" />

輸入內(nèi)容則還原

八、換行展示的藝術(shù): hyphens

??? 當(dāng)英文單詞必須折行時(shí)我們是否需要一個(gè)'連字符':

<div class="box">       The auto setting's behavior depends on the language being properly tagged       so that the appropriate hyphenation rules can be selected.     </div>

  .box {     border: 1px solid black;     width: 200px;     height: 100px;   }

??? 主角暴風(fēng)登場

      .box {         border: 1px solid black;         width: 200px;         height: 100px;         hyphens: auto;       }

??? 比較可惜的是無法自由定義'連字符'的樣式, 否則一定有點(diǎn)有趣。

九、滾動(dòng)的優(yōu)質(zhì)體驗(yàn): scroll-snap-type

??? 定義一個(gè)滾動(dòng)時(shí)的"臨時(shí)停頓點(diǎn)", 這個(gè)問題直接看gif動(dòng)畫比較直接:

??? 簡單來看就是每次慣性滑動(dòng)都會(huì)停留在特定元素所在位置, 有點(diǎn)像滾動(dòng)的'錨點(diǎn)':

<!DOCTYPE html> <html>   <head>     <style>       .box {         width: 200px;         height: 150px;         border: 1px solid;         border-left: 5px solid black;         border-right: 5px solid black;         margin: 40px;         overflow: auto;         scroll-snap-type: y mandatory;       }       .item {         border-top: 1px solid red;         height: 150px;         /* scroll-margin-top:20px; */         scroll-snap-align: start none;       }     </style>   </head>   <body>     <div class="box">       <div class="item">11111</div>       <div class="item">22222</div>       <div class="item">33333</div>       <div class="item">44444</div>       <div class="item">55555</div>       <div class="item">66666</div>     </div>   </body> </html>

???? scroll-snap-type: y mandatory;設(shè)置了y軸滾動(dòng)時(shí)盡量停留在'元素點(diǎn)位'上, scroll-snap-align: start none;目標(biāo)元素自身的滾動(dòng)起始方向用來對齊, 也就是告訴瀏覽器滾動(dòng)后要停留在子元素的哪里。

???? 在子元素身上設(shè)置scroll-margin-top: 20px 可以設(shè)置一定的檢測距離, 并附加回彈效果:

end

???? 這次神奇的css之旅就是這樣, 希望與你一起進(jìn)步。

（學(xué)習(xí)視頻分享：web前端）