您的位置：首页 > Web前端 > CSS

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

2016-10-10 00:25 281 查看

介绍

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>


唠叨

不知道啥时候，sass上的一些特性写法可以在原生的CSS体现，，CSS-NEXT看过一些，还是只有一些小改动
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 inherit css3颜色继承 safari chrome
相关文章推荐
新的分享
章节导航