最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

css学习之color:window和color:currentColor-yancyenough

来源:懂视网 责编:小OO 时间:2020-11-27 16:44:38
文档

css学习之color:window和color:currentColor-yancyenough

  看完之后感觉眼前一亮,有的我之前根本没有用过,甚至都不知道有color: currentColor这么个东西,抑制不住内心的好奇立马翻阅资料看了看以上属性的区别。接下来小编就谈谈本人学习之后的理解。1、color: currentColor。currentColor关键字的使用值是color属性值的计算值。如果currentColor关键字被应用在 color 属性自身,则相当于是 color: inherit。div { border: 1px solid;color: red;}。
推荐度:
导读  看完之后感觉眼前一亮,有的我之前根本没有用过,甚至都不知道有color: currentColor这么个东西,抑制不住内心的好奇立马翻阅资料看了看以上属性的区别。接下来小编就谈谈本人学习之后的理解。1、color: currentColor。currentColor关键字的使用值是color属性值的计算值。如果currentColor关键字被应用在 color 属性自身,则相当于是 color: inherit。div { border: 1px solid;color: red;}。
一、易被忽略的属性

  • color: currentColor
  • color: window
  •   看完之后感觉眼前一亮,有的我之前根本没有用过,甚至都不知道有color: currentColor这么个东西,抑制不住内心的好奇立马翻阅资料看了看以上属性的区别。接下来小编就谈谈本人学习之后的理解

      1、color: currentColor

      currentColor关键字的使用值是color属性值的计算值。如果currentColor关键字被应用在 color 属性自身,则相当于是 color: inherit;

     div { border: 1px solid; color: red; }
    

      上述代码将会让div拥有一个红色的边框,这就解释了 border-color 属性的默认值是color属性的值;如果将上述代码中的color属性定义删除,那么边框的颜色将取决于父元素的 color 计算值,因为 color 拥有继承性;

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

    
    
     
     Document
     
    
    
     
     sdfsdfsdf
     
    
    
    

      看到这里currentColor的作用大概已经了解了,接下来看看currentColor可以怎么用,先看其兼容性,主流浏览器都兼容,IE9以上

      

      用于渐变、用于svg、用于动画等,下面以渐变为例:

     
     
    .box{
     height:100px;
     color: #3CAADB;
     background-image: linear-gradient(to right, #fff, currentColor 100%);
    }
    

      效果如图所示:

      2、color: window  

    .mm{
     padding: 10px;line-height: 30px;display: inline-block;color:window;background-color: red
    }
    

      系统默认设置文本颜色:(无)也就是白色

      效果如下:

      如图所示color:window取得是系统默认的颜色,该颜色是根据系统默认设置文本颜色的改变而改变的  

      结束语:不知不觉已经工作了一年多了,这一年来从一名什么都不知道的小白,变成一名稍微知道一点皮毛的小白,想想也真是心酸。看着技术大牛们时不时的分享一些自己学 习的经验,我只能各种顶礼膜拜。今天鼓起勇气跳出来分享一些平时工作中遇到的问题和总结,内心还是十分忐忑不安的...第一次写文章写的不好望各位大神轻拍,写的不对的不好的可以留言指出,或者加本人QQ群519875573,希望大家共同交流进步

    文档

    css学习之color:window和color:currentColor-yancyenough

      看完之后感觉眼前一亮,有的我之前根本没有用过,甚至都不知道有color: currentColor这么个东西,抑制不住内心的好奇立马翻阅资料看了看以上属性的区别。接下来小编就谈谈本人学习之后的理解。1、color: currentColor。currentColor关键字的使用值是color属性值的计算值。如果currentColor关键字被应用在 color 属性自身,则相当于是 color: inherit。div { border: 1px solid;color: red;}。
    推荐度:
    标签: color css currentColor
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top