日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

新聞中心

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

背景

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

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

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

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

1. 為元素賦予css屬性

div class="box">

  
  
    

      

        ①
        ②
        ③

把文案改成 "◤ ◢ " 就會出現(xiàn)第一個動圖的效果啦!

四、引號: quotes

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

1.基本使用

jojo的奇妙冒險

效果圖:

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

2.看似雞肋?

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

:root {
    --open: "《";
    --close: "》";
  }
  div::before {
    content: var(--open);
  }
  div::after {
    content: var(--close);
  }
jojo的奇妙冒險

3.套娃高手 quotes 雄起

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

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

        
jojo的奇妙冒險

        
Overlord

        
艾爾登法環(huán)

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

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

  

    jojo的奇妙冒險
  

  

    Overlord
  

  

    艾爾登法環(huán)

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

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

      

        第一:
        

          第二:
          
第三:

        

        

          第二:
          

            第三:
            
第四:

          

        

      

      

        第一:
        
第二:

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

五、還原大師: all

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

這是一個比較強硬的屬性, 可以把幾乎所有css屬性進行重置:

我們先設(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身上的所有屬性都重置了, 不管是"背景顏色"還是"字體顏色", 甚至寬高, 所以這里屬于是完全初始化了。

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

2.inherit: 集成值保

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

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

3.revert: 還原

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

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

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

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

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

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

六、目標元素樣式 :target

這個屬性讓頁面的url參數(shù)與dom元素互動起來

1: 跳轉(zhuǎn)選中

比如當前url是https://www.xxxxxxxxxxx.com/#target_id則:

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

    你好

2. 跳轉(zhuǎn)后動畫

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

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

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

input:placeholder-shown {
        background-color: lightblue;
      }

      input {
        width: 300px;
        height: 60px;
      }

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

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

當英文單詞必須折行時我們是否需要一個'連字符':


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

比較可惜的是無法自由定義'連字符'的樣式, 否則一定有點有
分享題目：不容錯過的九個冷門css屬性
轉(zhuǎn)載來源：http://www.dlmjj.cn/article/cdjhdpp.html