不容错过的九个冷门css属性

背景

可能我们有时候潜意识里认为, 当前实际开发中css属性已经足够用了, 但是前段时间突然想到:"会不会我们只是思维被限制在了常用的css属性中, 从而丧失了创造力", 就像发明车之前大多数人会认为骑马已经足够快可以满足自己的需求了, 所以我专门整理了一下自己的学习笔记并且专门去学习了一些冷门的css属性, 果然收获满满, 所以今天也要在这里把这些脑洞大开的属性较少给你, 准备好一起来感受css的魅力吧。

目前创新互联公司已为超过千家的企业提供了网站建设、域名、网络空间、网站托管、企业网站设计、黑山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、开胃菜 css画背景图: paint

我们开发中使用的背景图大部分是(png, webp等)图片、svg矢量图、canvas画图, 但是其实我们也可以选择css直接画图, 那css这种甚至都"称不上"编程语言的家伙怎么绘制复杂的图片那?

1. 为元素赋予css属性

div class="box">

把文案改成 "◤ ◢ " 就会出现第一个动图的效果啦!

四、引号: quotes

所谓引号就相当于给书名加上'书名号', 给语言加上'冒号双引号', 当然他还有一些神奇玩法。

1.基本使用

jojo的奇妙冒险

效果图:

这里要注意的是如果没写content: open-quote;会导致前后'书名号'都消失, 但是唯独没写content: close-quote;则会保留展示"《"。

2.看似鸡肋?

当前这个基础写法也太鸡肋了, 不就是给"《"起了个别名叫open-quote吗? 并且关键是占用了我的before与after, 感觉画蛇添足, 比如我可以用如下的方法进行替换:

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

jojo的奇妙冒险

3.套娃高手 quotes 雄起

其实quotes的看家本领是它可以接受n个参数!

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


        jojo的奇妙冒险

        Overlord

        艾尔登法环

神奇的事情出现了, 当出现嵌套结构的时候, 内部的元素会使用第三个与第四个参数作为"引号", 套娃事件出现啦:

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


  
    jojo的奇妙冒险
  

  
    Overlord
  

  
    艾尔登法环

说实话这个套娃能力还挺厉害的, 并且我们可以讲 close-quote属性置空, 我想到的就是列表:

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

要注意不写close-quote会让css找不到在哪里结束, 所以最好写上并给空值。

五、还原大师: all

CSS all 简写属性将除了 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。

这是一个比较强硬的属性, 可以把几乎所有css属性进行重置:

我们先设置一下基础的环境：

.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;将所有属性置为空了, 而不会根据标签属性进行筛选, 所以这个属性有点太绝对了要小心使用。

2.inherit: 集成值保

依然是顾名思义, 将所有属性设置为 "继承父级", 并且还原自身的属性, 比如宽高都没有了但是继承了字体大小与字体粗细

不是所有css属性的默认值都是'继承', 比如说position的默认值就不是集成, 但是position可以设置为position: inherit;, 这就埋下了隐患请看下一条属性。

3.revert: 还原

虽然看起来效果与inherit几乎一样, 但是实质上有大区别, 比如如果此时wrap父元素设置position: absolute;, 那么设置了all: inherit的元素为position: absolute;, 设置了all:revert的元素是position: static, 也就是说目标元素单纯的还原成最开始的样式, 剔除掉了后期设置的属性, 但保留一些默认的继承属性, 这个属性虽然兼容性超差但最牛!

4.all的优先级

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

这里的背景色是可以设置成功的, 所以all应该算一锤子买卖, 只把设置all属性之前的样式重置。

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

上面是不生效的, 因为all只能重置优先级不如自己选择器的属性, 所以需要all: revert!important;。

六、目标元素样式 :target

这个属性让页面的url参数与dom元素互动起来

1: 跳转选中

比如当前url是https://www.xxxxxxxxxxx.com/#target_id则:

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


    你好

2. 跳转后动画

我想到的是每次选中元素后让元素有个动画效果, 实在太简单了就不演示了, 说一下这个属性的鸡肋点吧, 比如无法同时传递多个id, 或者传递class, 并且他让css属性与dom结构之间绑定关系变弱了代码不方便维护与阅读。

七、输入框的placeholder样式设置: placeholder-shown

可以设置当input组件中展示placeholder时的样式:

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

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

输入内容则还原

八、换行展示的艺术: 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;
  }

主角暴风登场

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

比较可惜的是无法自由定义'连字符'的样式, 否则一定有点有

分享题目：不容错过的九个冷门css属性
路径分享：http://www.csdahua.cn/qtweb/news5/245855.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网