日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
不容錯(cuò)過的九個(gè)冷門css屬性

背景

可能我們有時(shí)候潛意識(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的魅力吧。

目前創(chuàng)新互聯(lián)公司已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、黑山網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

1. 為元素賦予css屬性

div class="box">

  
  
    

      

        ①
        ②
        ③

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

四、引號(hào): quotes

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

1.基本使用

jojo的奇妙冒險(xiǎn)

效果圖:

這里要注意的是如果沒寫content: open-quote;會(huì)導(dǎo)致前后'書名號(hà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);
  }
jojo的奇妙冒險(xiǎn)

3.套娃高手 quotes 雄起

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

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

        
jojo的奇妙冒險(xiǎn)

        
Overlord

        
艾爾登法環(huán)

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

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

  

    jojo的奇妙冒險(xiǎn)
  

  

    Overlord
  

  

    艾爾登法環(huán)

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

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

      

        第一:
        

          第二:
          
第三:

        

        

          第二:
          

            第三:
            
第四:

          

        

      

      

        第一:
        
第二:

要注意不寫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;
  }

    

      
你好

      
你好: initial

      
你好: inherit

      
你好: revert

1.initial : 還原為初始值

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

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

2.inherit: 集成值保

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

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

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)先級(jí)

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

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

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

上面是不生效的, 因?yàn)閍ll只能重置優(yōu)先級(jí)不如自己選擇器的屬性, 所以需要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;
  }

    你好

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

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

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

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


      The auto setting's behavior depends on the language being properly tagged
      so that the appropriate hyphenation rules can be selected.
    

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

主角暴風(fēng)登場

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

比較可惜的是無法自由定義'連字符'的樣式, 否則一定有點(diǎn)有
網(wǎng)頁標(biāo)題：不容錯(cuò)過的九個(gè)冷門css屬性
網(wǎng)站網(wǎng)址：http://m.5511xx.com/article/cdjhdpp.html