Home > Developer > JavaScript
Css learning color: window and color: currentColor, csscurrentcolor
1. Easy to ignore attributes
After reading it, I felt like it was bright. Some of them were never used before. I even didn't even know the color: currentColor. I couldn't restrain my curiosity. I immediately looked at the information and looked at the difference between the above attributes. Next, let's talk about my understanding after learning.
1. color: currentColor
The value of the currentColor keyword is the calculated value of the color attribute value. If the currentColor keyword is applied to the color attribute, it is equivalent to color: inherit;
div { border: 1px solid; color: red; }
The code above will give the div A red border, which explains that the default value of the border-color attribute is the value of the color attribute. If you delete the definition of the color attribute in the above Code, the border color will depend onParent ElementBecause the color has inheritance;
If no color is specified for the parent element, its parent element will inherit from the parent level until the root node of the document.htmlThe default color of the browser is used before labels are displayed. For example:
<!DOCTYPE html>
The role of currentColor is probably understood here. Next, let's take a look at how currentColor can be used. First, let's look at its compatibility. Mainstream browsers are compatible with IE9 and later versions.
Used for gradient, svg, animation, etc. The following uses gradient as an example:
<div class="box"></div>.box{ height:100px; color: #3CAADB; background-image: linear-gradient(to right, #fff, currentColor 100%);}Effect:
2. color: window
.mm{ padding: 10px;line-height: 30px;display: inline-block;color:window;background-color: red}
The system sets the text color by default: (none) That is white.
The effect is as follows:
Color: the default color of the window. The color is changed based on the text color changed by default.
Conclusion: I have been working for more than a year without knowing anything. This year, I have changed from a little white who knows nothing to a little white. It's really sad to think about it. As technical experts share their learning experience from time to time, I can only worship each other. Today, I have the courage to jump out and share some of my daily work problems and summaries. I am still very uneasy... for the first time I wrote an article, I hope you can take a pat on it. If you do not write well, you can leave a message to point out, or add your QQ Group 519875573. I hope you can exchange ideas and make progress together.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
