尚武科技——负责任的企业公民

尚武十年[点击进入]

电话

电话咨询

pHONE CONSulTING

0311-87882018

QQ

在线咨询

ONliNE CONSulTING
百度商桥 在线客服
基础服务

基础服务

BaSIC SERVICES
业务
科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告 尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
如何使用currentColor属性写出更好的CSS代码?

  CSS属性比较多,但是有一些很少被技术人员使用,虽然这些属性目前已被浏览器支持,而currentColor就是属性之一,现在我们和石家庄网站建设小编一起了解一下吧!

  currentColor代表了当前元素被应用上的color颜色值。它允许让继承自属性或子元素属性的color属性为默认值而不再继承。而其关键字按某种规则获取了color属性的值并赋值给了自身。

  在任何你想要默认继承color属性值的地方都可以使用currentColor这一关键字。也会随着color关键字的属性值的改变,它会自动的通过规则反映在所有currentColor关键字使用的地方。

  .box {

  color: red;

  border: 1px solid currentColor;

  box-shadow: 0 0 2px 2px currentColor;

  }

  在上面的代码片段里,并不是重复相同的color值,而是用currentColor来代替。这使CSS变得好控制,也不再需要在不同的地方来追踪color值简化color定义。像链接,边框,图标以及阴影等都可以通过简化的currentColor来替换一遍又一遍的特定color值;从而使代码更加易于管理。

石家庄网站建设

  例如:

  .box {

  color: red;

  }

  .box .child-1 {

  background: currentColor;

  }

  .box .child-2 {

  color: currentColor;

  border 1px solid currentColor;

  }

  在上面的代码片段中,你可以看到我们不是在边框、阴影上指定一个颜色,而是在这些属性上使用了currentColor,这将使它们自动变为red。

  简化过渡和动画

  currentColor可以使transitions和animations变得更加简单。所有使用currentColor 的属性会自动在hover时发生改变。

  在伪元素上使用

  像是:before 和 :after 这样的伪元素也同样可以通过用 currentColor 来获取它的父元素的值。这就可以用于创建带有动态颜色的『提示框』,或是使用 body 颜色的『覆盖层』,并给它一个半透明的效果。

  .box {

  color: red;

  }

  .box:before {

  color: currentColor;

  border: 1px solid currentColor;

  }

  在 SVG 中使用

  SVG 中 currentColor 的值同样可以从父元素中获取。当你在不同地方应用 SVG 并想从父元素中继承 color 值而又不想每次明确提及时,使用它是相当有帮助的。

  svg {

  fill: currentColor;

  }

  在渐变中使用

  currentColor 可以同样用于创建 CSS 渐变,其中渐变属性的一部分可以被设置成父元素的 currentColor 。

  .box {

  background: linear-gradient(top bottom right, currentColor, #FFFFFF);

  }

  CSS中currentColor属性是从CSS3引入SVG规范时产生的,因此除了IE8和一些低版本的浏览器不支持,其余的都是支持的。虽然其没有充分运用,但是使用后可以使代码更加整洁。




上一篇:网站建设7个基本流程分析             下一篇:开启htpps可以大幅度提升网站安全性!

标签:石家庄网站建设
尚武科技
推荐阅读
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
总部电话:0311-87882018    值班电话:15512183667
在线服务: 尚武科技售前专员   
合作答疑 |  企业邮箱 |  关于我们 |  联系我们 |  版权声明 |  会员中心 |  友情链接 |  免责声明
Copyright © 2008-2019 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved