How to use the new attribute currentColor in CSS3

Editor to share with you how to use the new attribute currentColor in CSS3. I hope you will get something after reading this article. Let's discuss it together.

CurrentColor means "current color" as its name implies, and it should be "current text color" exactly, for example:

.xxx {border:1pxsolidcurrentColor;}

CurrentColor stands for "the text color inherited by the current label", which is, in another way, the value of currentColor=color.

Wherever you need to use color values, you can use currentColor instead, such as background color-background-color, gradient color-gradient, box shadow-box-shadow,SVG fill color-fill, and so on. Very flexible, very easy to use!

Of course, you can use css to achieve background color hollowing out, you can easily control the color of the icon. The principle of implementation is that the icon-shaped area is transparent and hollowed out, while the perimeter is solid color.

Css Code:

.icon {

Display:inline-block

Width:16px;height:20px

Background-image:url (sprite_icons.png)

Background-color:#34538b;/* this color controls the color of the icon * /

}

.icon1 {background-position:00;}

.icon2 {background-position:-20px0;}

.icon3 {background-position:-40px0;}

.icon4 {background-position:-60px0;}

.link {margin-right:15px;}

Html Code:

Change the color:

Return

Refresh

Collection

Expand the picture

Js Code:

VareleInput=document.getElementById ("colorInput")

EleIcons=document.getElementsByTagName ("I")

EleInput.onchange=function () {vari=0,l=eleIcons.length;for (; I)