资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

CSS3中currentColor关键字如何使用

本篇文章为大家展示了CSS3中currentColor关键字如何使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联是一家集网站建设,新华企业网站建设,新华品牌网站建设,网站定制,新华网站建设报价,网络营销,网络优化,新华网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

场景1

CSS Code复制内容到剪贴板

  1. 约么？

      

  2. p{   

  3.     color: red;   

  4. }  

此时，

标签currentColor的值为red。

场景2

CSS Code复制内容到剪贴板

  1.   

  2.     

    约么？

      

  

  • .container{   

  •     color: #00ff00;   

  • }   

    • 现在，我们没有给

    标签指定颜色，它的color从父级容器也就是class为container的div继承而来，换句话说此时p标签的color为#00ff00，currentColor又是直接去取元素的color值，所以此时p标签的currentColor值也为#00ff00。
    CSS3中currentColor关键字如何使用

    场景3
    如果父级元素也没有写color呢？其实这里都还是CSS规则的范畴，跟本文的主角关系不太大。但本着不啰嗦会死的原则，就展开了讲。

    如果父级元素也没有指定颜色，那它的父级元素就会从父级的父级去继承，直到文档的根结点html标签都还没显示指定一个颜色呢，就应用上浏览器默认的颜色呗~

    XML/HTML Code复制内容到剪贴板

    1.   

    2.   

    3.       

    4.         我来组成头部  

    5.       

    6.       

    7.         

      约么？

        

    8.       

    9.     

      战神金钢，宇宙的保护神！
        

    10.   

    11. /**   

    12.  * 无CSS   

    13.  */  

    CSS3中currentColor关键字如何使用

    那，这个时候的黑色其实是浏览器默认给的。此时p标签的currentColor自然也跟color值一样，为黑色，纯黑的#000。

    如何用？

    了解它是怎样的物品后，下面问题来了，如何用？有额外的buff效果么，耗蓝多么，CD时间长么。。。

    前面说道，它就是一个CSS变量，存储了颜色值，这个值来自当前元素的colorCSS属性。当你需要为该元素其他属性指定颜色的时候，它就可以登上舞台了。

    CSS Code复制内容到剪贴板

    1.   

    2.     好好说话，有话好好说   

      

  • .container{   

  •     color: #3CAADB;   

  •     border: 4px solid currentColor;   

  • }  

    • CSS3中currentColor关键字如何使用

    这里我们第一次领略了currentColor的奇效。在指定边框颜色的时候，我们直接使用currentColor变量，而没有写一个传统的颜色值。

    你似乎也知道了该如何用了。不只是border，其他能够使用颜色的地方，比如background，box-shadow等等。
    与渐变混搭

    你可能无法想象到的是，除了可以将currentColor用到普通需要颜色的场景，它同样可以被用在渐变中。

    CSS Code复制内容到剪贴板

    1.   

      

  • .container{   

  •   height:200px;   

  •   color: #3CAADB;   

  •   background-image: linear-gradient(to rightright, #fff, currentColor 100%);   

  • }  

    • CSS3中currentColor关键字如何使用

    甚至也可用于填充svg，下面会有相应示例。

    currentColor 与SVG

    我们可以使用 currentColor 来检测元素当前使用的颜色，因而不需要定义 color 很多次。
    结合 SVG 图标使用时，currentColor 是很有用的，因为图标颜色的改变取决于它们的父元素。通常我们是这么做的：

    CSS Code复制内容到剪贴板

    1. .button {   

    2.   color: black;   

    3. }   

    4. .button:hover {   

    5.   color: red;   

    6. }   

    7. .button:active {   

    8.   color: green;   

    9. }   

    10.   

    11. .button svg {   

    12.   fill: black;   

    13. }   

    14. .button:hover svg {   

    15.   fill: red;   

    16. }   

    17. .button:active svg {   

    18.   fill: green;   

    19. }  

    使用 currentColor 之后：

    CSS Code复制内容到剪贴板

    1. svg {     

    2.   fill: currentColor;   

    3. }   

    4.   

    5. .button {   

    6.   color: black;   

    7.   border: 1px solid currentColor;   

    8. }   

    9. .button:hover {   

    10.   color: red;   

    11. }   

    12. .button:active {   

    13.   color: green;   

    14. }  

    另一种方式是用于伪元素：

    CSS Code复制内容到剪贴板

    1. a {     

    2.   color: #000;   

    3. }   

    4. a:hover {     

    5.   color: #333;   

    6. }   

    7. a:active {     

    8.   color: #666;   

    9. }   

    10.   

    11. a:after,     

    12. a:hover:after,     

    13. a:active:after {     

    14.   background: currentColor;   

    15.   ...   

    16. }  

    上述内容就是CSS3中currentColor关键字如何使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


    当前文章：CSS3中currentColor关键字如何使用
    文章来源：http://cdkjz.cn/article/igiscj.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    成都网站设计成都网创优客重庆网站建设成都小程序开发成都定制网站网站优化公司班戈纳美网站绵竹网站建设营销网站建设成都网站制作

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图