朋友，百姓网前端架构师css魔法的《css揭秘》，已经出版发行，并赠送了我一本。看了一下这本书，确实有很多css技巧。让你会有蛮大的收获，在这里帮他宣传一下！今天所说的案例呢，也是部分借鉴这本书的。今天和大家聊聊css变量和继承！

有人会说，css怎么会有变量和继承？你是说的css处理器吧！

不是，我说的是纯css，其实，css也在努力融入各种预处理器的特性和写法，甚至有些属性比预处理器更加强大，例如：

闲话少说，我们还是切入正题吧！

css变量

其实我说的变量，并非css处理器中的自定义变量，而是css某些属性有类似变量的功能！

这个属性就是currentColor

currentColor 的应用

1、镂空图片镂空和currentColor

代码如下：

.icon {
    display: inline-block;
   
    background-image: url(h/216/0y89gzo2/sprite_icons.png);
    background-color: currentColor; /* 该颜色控制图标的颜色 */
}
.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */

解释： 默认图标的背景颜色currentColor用的是link的颜色，link颜色改变时，图标的背景颜色也随着改变！

2、水平分割线和文本颜色保持一致，假如你所有的hr 颜色要和文本颜色保持一致，有了currentColor，可以如下写

hr{height:.5em;background:currentColor}

假如你的文本颜色变了，hr也会自动变。

css继承

继承我们用的是inherit属性

这个应用到时蛮多的，例如设置字体，表单的字体我们要和页面其他部分相同，我们不用重复定于，只要继承其他的就可以！

input,select,button{font:inherit}

超链接颜色与其他颜色相同，可以用：

a{color:inherit}

提示对话框的小箭头，要和整体对话框一直，包括边框和背景，我们可以用inherit

关于对话框，我前面文章也有关于css书写对话框的 ，但是这种写法对于对话框的边框很难控制，看下下面的这个应用吧！

代码如下：

.callout{position:relative;background-color:#ccc;border:1px solid red;}
.callout::before{content:"";position:absolute;top:-.4em;left:1em;padding:.35em;background:inherit;
border:inherit;border-right:0;border-bottom:0;transform:rotate(45deg);}//先写一个正方形，然后旋转45度变为三角形

例子

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
 

I inherited blue from the root element!

I’m red too, because of inheritance!

背景和边框继承callout，这样写起来更加方便了！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• HTML如何设定标题水平对齐，用什么方法呢？

  不少朋友都想知道在HTML表格标记中标题水平对齐属性、语法那些是怎样的？带着这个问题，爱站技术频道小编特地整理了相关资料，希望能帮助到朋友们。

• 用HTML+原生JS怎样制作简单的弹窗效果

  本文将结合实例代码，介绍html实现弹窗的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• CSS3中转换与过渡的实现方法是什么，有哪些知识点

  一、transform1.12D转换通过CSS3转换，能够对元素进行移动、缩放、转动、拉长或拉伸。1.旋转,deg表示角度。负的为逆时针转动，默认沿着中心点旋转。可以利用transform-origin设置旋转原点。transform:rotate(30deg);2.用来设置变形原点，变形时以这个点为基准点，默认为50%50%。transform-origin:

• 用纯CSS如何制作波浪移动的效果，步骤是什么

  本篇文章主要介绍了纯CSS实现波浪移动效果的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• HTML中相对位置与绝对位置是怎样，怎么使用

  HTML中相对位置与绝对位置是怎样，怎么使用？一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！