feature that actually has some browser support now that has a CSS variable feel to it, and that’s the currentColor It works like this: div { color: red; border: 5px solid currentColor; box-shadow: 0 0 5px solid currentColor; } I learned about this from a panel at SXSW 2011 on CSS3 with Stephanie & Greg Rewis, #It will follow the cascade body { color: red; } div { border: 5px solid currentColor; } #You can’t trick ; box-shadow: 0 0 5px currentColor; color: black; } Everything will be black.
为什么背景色需要设置为currentColor呢？ 首先需要知道currentColor属性 currentColor代表了当前元素被应用上的color颜色值。 简单理解： CSS里可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。 在这里设置了span的color属性为白色，所以背景色也就是color属性的值：白色 设置color为白色是为了使得阴影为白色（之后会使用span的阴影） 在后面步骤中将说明如果不使用currentColor 疑问解答 如果将span、span::before、span::after的背景色不设置为currentColor，而是直接设置为white（白色） 效果则是 ? 为了使span、span::before、span::after的背景色也随之变化，故使用currentColor参数，使得span、span::before、span::after的背景色保持和color
个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程，多款云服务器20元起。
color: #9da0a0; position: relative; width: 12px; height: 14px; border-left: solid 1px currentColor ; border-right: solid 1px currentColor; border-bottom: solid 1px currentColor; border-radius position: absolute; left: 1px; top: -6px; width: 8px; height: 17px; border: solid 1px currentColor ; border-radius: 4px; background-color: currentColor; } .audioIcon:after { content: ''; : absolute; left: 4px; bottom: -4px; width: 1px; height: 4px; background-color: currentColor
; border: 0 solid currentColor; } .loading { width: 18px; height: 18px; } .loading > div { ; border: 0 solid currentColor; } .loading { width: 54px; height: 18px; } .loading > div { ; border: 0 solid currentColor; } .loading { width: 16px; height: 16px; } .loading > div { ; border: 0 solid currentColor; } .loading { width: 32px; height: 32px; } .loading > div { ; border: 0 solid currentColor; } .loading { width: 32px; height: 32px; } .loading > div {
这里的这个测试 test3 是为了说明，当传入的色彩关键字错误，CSS 属性将无效而不是使用当前的currentColor 替代。 currentColor会在下文说明。 的 alt 文本和 ul 列表项的小点则会继承当前元素 currentColor 的属性。 currentColor 很多人都不知道还有 currentColor 这个东东。和 transparent 一样，它也是一个关键字，顾名思义，它表示当前颜色。它来自自属性或者继承于它的父属性。 但是，currentColor 是 CSS3 新增的，在老版本浏览器下是无法识别的。 currentColor 的兼容性 ? rgb() 与 rgba() 颜色表示模型的话，简单了解一下。
body { background-color: currentColor; } .sun { width: 2.5em; height: 2.5em; margin: -1.25em ; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 0.375em orange; animation: body { background-color: currentColor; } .cloudy { position: absolute; } .cloud { position: absolute ; z-index: 1; width: 3.6875em; height: 3.6875em; margin: -1.84375em; background: currentColor body { background-color: currentColor; } .thunder-storm { position: absolute; } .cloud{ ... } .
green = items.at(7)->getPercent() / 100; double blue = items.at(8)->getPercent() / 100; QColor currentColor = QColor::fromRgbF(red, green, blue); emit colorChanged(currentColor, items.at(0)->getValue(), items.at () * 100; double percentBright = currentColor.lightnessF() * 100; //计算当前值所占百分比 ); items.at(2)->setTopColor(currentColor); items.at(1)->setBorderColor(currentColor); items.at(2)->setBorderColor(currentColor); } } 六、控件介绍 超过149个精美控件，涵盖了各种仪表盘、进度条、进度球、指南针、曲线图
; border: 0 solid currentColor; } .loading { width: 26px; height: 26px; } .loading > div { ; border: 0 solid currentColor; } .loading { width: 26px; height: 26px; } .loading > div { ; border: 0 solid currentColor; } .loading { width: 32px; height: 32px; } .loading > div { ; border: 0 solid currentColor; } .loading { position: relative; width: 32px; height: 32px; ; border: 0 solid currentColor; } .loading { position: relative; width: 32px; height: 32px;
currentColor ? currentColor不是一个css属性，而是color的属性值，currentColor 返回当前元素继承的文字颜色。 比如当前元素 color 属性值为 red，currentColor 的值也为 red。currentColor相当于color属性值的别名，利用这一特点，我们可以统一管理元素的颜色。 div{ width: 100px; height: 100px; color: red; border: 1px solid currentColor; } selection ?
这两位与上边两位的区别在于后边的a(alpha)透明度; 透明度为0-1之间的数值,0为全透明,1为全不透明,利用透明度可以做出很多好看的效果 一个简单的例子(当然了- -这个例子不算好看) 上例中用到了一个类似于变量的单词(currentColor [大小写不区分]) currentColor可用于所有设置颜色属性的地方. 取值为当前元素的color属性值,如果没有,寻找父级,一直到根元素,如果都没有设置的话,不要担心,还有浏览器代理的默认颜色. w3官方有一个简短的解释,如果元素color属性值为currentColor 的话,则视为 ‘color:inherit’; 比较实用的一个地方就是,设置元素边框颜色,颜色(color),等等属性时,只需设置颜色(color);后续更改时也只需修改一处,子元素也可直接继承使用currentColor
; if (startColor>endColor){ currentColor = (int) (startColor - (fraction* colorDiff-offset)); if (currentColor<endColor){ currentColor = endColor ; } }else { currentColor = (int) (startColor + (fraction* colorDiff-offset)); if (currentColor>endColor){ currentColor = endColor ; } } return currentColor; } } 这大概是我们整个动画操作当中最复杂的一个类了
扫码关注腾讯云开发者
领取腾讯云代金券
云服务器
云数据库 SQL Server
网站备案
文件存储
SSL 证书
