我们已经准备好了,你呢？

获取网站建设报价

2024我们与您携手共赢，为您的企业形象保驾护航！

今天，小编给大家带来一篇来自社区作者的文章，让我们一起来学习一下这9个不受欢迎的CSS属性。

背景

也许我们有时候会下意识地认为现在的 CSS 属性已经足够应付实际开发了，但是前段时间突然想到：“也许我们的思维仅仅局限于常用的 CSS 属性，从而丧失了创造力”，就像汽车发明之前，大多数人都认为骑马的速度足够快，就能满足需求，于是特意整理了一下自己的学习笔记，学习了一些冷门的 CSS 属性，果然收获颇丰。所以今天我也将这些脑洞大开的属性分享给大家，准备好一起感受 CSS 的魅力吧。

1. CSS 背景绘制：paint

我们在开发中使用的背景大多是（png、webp等）图片、svg矢量图、绘图。但是我们也可以选择CSS直接绘制。那么连编程语言都称不上的CSS是如何绘制复杂的图片的呢？

滚动的文字怎么做html_html页面上下滚动_html文字上下滚动代码

1：为元素分配 css 属性


div class="box">


  
  
    "wrap">
      "box">
        "text">①
        "text">②
        "text">③
      

    

    
  

将文字改为“◤ ◢ ✿”，第一个动画图像就会出现！

4.引号：

所谓引号，就相当于在标题上加了“书名号”，在语言上加了“冒号双引号”，当然，还有一些神奇的玩法。

1：基本用法


 "box">jojo的奇妙冒险




效果图：


滚动的文字怎么做html_html文字上下滚动代码_html页面上下滚动


这里要注意的是，如果不写:open-quote;，那么前后的‘书名标记’都会消失，但如果不写:close-quote;，则“《”会保留下来并显示出来。


2：看上去没用？


现在的基本写法太鸡肋了，不就是给《》换了个名字叫open-quote吗？而且关键是还占了我后面的and，感觉多余。比如我可以用下面的方法代替：





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


"box">jojo的奇妙冒险

3：套娃大师的崛起

其实它的特别之处在于可以接受n个参数！


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

"box">
        "box">jojo的奇妙冒险
        "box">Overlord
        "box">艾尔登法环
    


滚动的文字怎么做html_html页面上下滚动_html文字上下滚动代码


神奇的事情发生了，当出现嵌套结构时，内部元素会把第三、第四个参数当成“引号”，就出现了嵌套娃娃事件：





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


"box">
  "box">
    "box">jojo的奇妙冒险
  
  "box">
    "box">Overlord
  
  "box">
    "box">艾尔登法环
  



html文字上下滚动代码_html页面上下滚动_滚动的文字怎么做html


说实话，这个套娃能力还是挺强大的，而且我们可以说 close-quote 属性为空，想到的就是这个列表：





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


 "box">
      "box">
        第一:
        "box">
          第二:
          "box">第三:
        
        "box">
          第二:
          "box">
            第三:
            "box">第四:
          
        
      
      "box">
        第一:
        "box">第二:
      
    


html页面上下滚动_html文字上下滚动代码_滚动的文字怎么做html


请注意，如果不写 close-quote，CSS 将无法找到结束位置，因此最好写上它并赋予其一个空值。


5. 恢复主控：全部


CSS all 简写属性将除 -bidi 之外的所有属性重置为它们的初始或继承的值。


这是一个比较强大的属性，可以重置几乎所有的 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;
  }





  
    "wrap">
      "box">你好
      "box box1">你好: initial
      "box box2">你好: inherit
      "box box3">你好: revert
    
  


html文字上下滚动代码_滚动的文字怎么做html_html页面上下滚动


1： ：恢复初始值


顾名思义，就是在这里重置该div的所有属性，不管是“背景颜色”还是“字体颜色”，甚至是宽度和高度，所以这是彻底初始化了。


但是有一个很大的陷阱，它会把原来div的 : 块改为 : ，也就是说 all: ; 会把所有属性都设置为空，并且不会根据标签属性进行筛选，所以这个属性有点过于绝对，应谨慎使用。


2： ：保留积分值


顾名思义，所有属性都设置为“从父级继承”，属性的属性就会恢复。例如，宽度和高度消失了，但字体大小和粗细会被继承。


并非所有 CSS 属性的默认值都是“继承”的。例如 的默认值就不是继承自，但可以设置为： ;，这就存在隐患。请看下一个属性。


3： ：恢复


虽然看上去效果差不多，但本质上还是有很大区别的。比如设置了wrap父元素为：;，那么all为：的元素就是：;，all为：的元素就是：，也就是说只是将目标元素恢复到原来的样式，消除了后面设置的属性，但是保留了一些默认继承的属性。虽然这个属性兼容性差，但是却是最好的！


4：所有优先





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


这里的背景颜色就可以设置成功，所以all应该算是一次性处理，只会重置设置all属性之前的样式。


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


上述方法无效，因为 all 只能重置优先级低于其自身选择器的属性，因此 all: !; 是必需的。


6.目标元素样式：


此属性允许页面的 URL 参数与 DOM 元素进行交互


1：跳至选定


例如，如果当前 URL 是 #，那么：





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


"target_id">
    你好



滚动的文字怎么做html_html文字上下滚动代码_html页面上下滚动


2：跳跃后的动画


我想到的是让元素在每次被选中时都拥有动画效果，太简单就不演示了，先说一下这个属性没用的地方，比如不能同时传递多个ID或者class，弱化了CSS属性和DOM结构的绑定关系，使得代码不便于维护和阅读。


7.输入框样式设置：-shown


可以设置在输入组件中显示时的样式：





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

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


 "展示我时为蓝色" />


html文字上下滚动代码_html页面上下滚动_滚动的文字怎么做html


恢复输入内容


滚动的文字怎么做html_html文字上下滚动代码_html页面上下滚动


8.换行显示的艺术：


当英语单词必须换行时，我们需要连字符吗：





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


html页面上下滚动_滚动的文字怎么做html_html文字上下滚动代码


主角暴风女登场


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


html页面上下滚动_html文字上下滚动代码_滚动的文字怎么做html


可惜‘连字符’的风格不能自由定义，否则会很有趣。


9. 高品质滚动体验：-snap-type


html文字上下滚动代码_滚动的文字怎么做html_html页面上下滚动


定义一个滚动时的“暂时停顿点”，看gif动图更直观：


简单来说，每次惯性滑动都会停留在特定元素的位置，有点像滚动的‘锚点’：




  
    
  
  
    "box">
      "item">11111
      "item">22222
      "item">33333
      "item">44444
      "item">55555
      "item">66666
    
  



-snap-type: y；设置滚动时y轴尽量停留在‘元素点’上，-snap-align: start none；使用目标元素自身的滚动起始方向进行对齐，也就是告诉浏览器滚动之后子元素应该停留在哪里。


在子元素上设置--top:20px可以设置一定的检测距离，并增加反弹效果：


结尾


这次神奇的CSS之旅就到此结束了，希望和大家一起进步。

                 
二维码
扫一扫在手机端查看

        
        
         
        
        
        

            本文链接：https://by928.com/2704.html     转载请注明出处和本文链接！请遵守
            
          《网站协议》
          ！
            
        
我们凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，累计为4000多家客户提供品质建站服务，得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求，请立即点击咨询我们或拨打咨询热线： 13761152229，我们会详细为你一一解答你心中的疑难。
项目经理在线

        

      
    
    
 
      
      

        
相关阅读

        
      

      
      
      

        
猜您喜欢

        
      

    

    
  



  

    
我们已经准备好了,你呢？

    
获取网站建设报价

    
2020我们与您携手共赢，为您的企业形象保驾护航！

  







  

    
不达标就退款 高性价比建站 免费网站代备案 1对1原创设计服务 7×8小时售后支持

  

  

    

      
网站建设

      

        
      

    

    

      
客户案例

      

        
    
          
        

      

    

    

      
新闻动态

      

        
      

    

    

      
了解我们

      

        
      

    

    

      
全国免费咨询

      

        

        
        
业务咨询：13761152229

        
        
联系地址：上海市嘉定区真南路4268号

        
电子邮箱：mail@by928.com

      

    

  

  
  
  

    

      
© 2024  Copyright 上海泊元信息科技有限公司    备案号：沪ICP备2024065398号-2   

    

  







  





  
在线客服     

  

    
    
联系方式

    

      
热线电话

      
13761152229

      
上班时间

      
周一到周五

      
公司电话

      

    

    
二维码

    
微信 

  

  
 在线客服