CSS3：说说CSS上的第一个变量currentColor,及扯扯inherit

最新推荐文章于 2025-03-26 19:00:00 发布

crper

最新推荐文章于 2025-03-26 19:00:00 发布

阅读量3.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： css3 inherit css3颜色继承 safari chrome

本文链接：https://blog.csdn.net/crper/article/details/52772817

笔记-HTML4&5/CSS2.1&3 同时被 2 个专栏收录

29 篇文章

订阅专栏

CSS3及HTML5折腾记

23 篇文章

订阅专栏

本文介绍了CSS中currentColor和inherit属性的应用技巧。通过实例演示如何使用currentColor简化颜色控制，并利用inherit实现子元素对父元素样式的继承。适用于前端开发者学习进阶。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

currentColor – 这货说是CSS3的一个特性，但是用变量来说会更好理解；
- 兼容性[IE9+ 及主流的FF,chrome ]。
  - 但是IE10及edge有一些BUG（用于渐变的时候会不生效）
  - Safari and iOS Safari 8 之前，作用于部分伪元素也不生效 ，比如:before 和:after
- currentColor拿的是文本的color的值，也就是可以理解为 currentColor = color
- currentColor可以作用于常见到的色彩作用域（border,box-shadow,outline-color,background-color等）
- currentColor会向上遍历，自身color不设置则取父类，父类不设置则取:root根元素的，啥都没就浏览器默认值
inherit – 这个存在已久，这里扯扯关于这货的一些技巧
- 使用inherit 表明要继承于父元素的样式属性，会使子元素继承了那些不会被自动继承的属性．
- inherit还能作用于伪类元素，继承主体的一些特性，比如做一个角标，下拉箭头等等

只要用的好，我们写出的代码可以更加简洁，方便理解和维护；

效果图

父元素

黑色背景区域
这里写图片描述

渐变背景区域
这里写图片描述

子元素

FFFF区域
这里写图片描述

角标
这里写图片描述

代码加注释

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>currentColor && inherit</title>
    <style type="text/css" media="screen">
    .cC {
        /* currentColor */
        height: 200px;
        width: 200px;
        color: #161616;
        background-color: currentColor;
        border: 3px solid currentColor;
        box-shadow: 2px 2px 2px currentColor;
    }

    .test {
        /* 继承父类的颜色及阴影设置 */
        color: inherit;
        background: #01E498;
        display: block;
        outline:2px solid #BF0808;
        border: 1px solid #FFFFFF;
        box-shadow: inherit;
        width: 50px;
        height: 50px;
    }

    .aaa{
        display: inline-block;
        height: 10px;
        width: 20px;
        /* 继承父类的大小及边框形状但有自身的颜色值 */
        border-width: inherit;
        border-style: inherit;
        border-color: #27C6AE;
    }

    /* 角标继承主体 */
    .trangle{
        height: 200px;
        width: 200px;
        color: #60C344;
        font-size: 20px;
        font-weight: 700;
        border: 2px solid currentColor;
        position: relative;
        background-image: linear-gradient(30deg , rgba(56,35,155,.5),currentColor);
        background-color: #FF0000;
    }
    .trangle::after{
        /* 脱离文档流的元素，默认都是块级元素哦， display:block; */
        position: absolute;
        top: 0;
        left: 0;
        content: '100';
        height: 0;
        width: 0;
        color: #000;
        font-size: inherit; /*继承主体的字体大小*/
        font-weight: inherit;
        border-width:30px 30px 30px;
        border-style:inherit; /*继承主体的实线*/
        border-color:#E30B0B #E30B0B transparent ;




    }
    </style>
</head>

<body>
    <div class="cC">
        <a class="test">
            FFFF <span class="aaa">啊啊啊</span>
        </a>
    </div>


    <div class="trangle"></div>
</body>

</html>