CSS repeating-linear-gradient() 函数
重复的线性渐变
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
angle 定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。
side-or-corner 指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的。
color-stop1, color-stop2,... 指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。
linear-gradient实现水平条纹背景，垂直条纹背景，斜向条纹背景
条纹渐变
<html>
<head>
<style type="text/css">
div
{
font-size:100px;
text-align:center;
line-height:3;
color:white;
background: repeating-linear-gradient(45deg,#fb3,#fb3 50px,#58a 50px,#58a 100px);
}
</style>
</head>
<body>
<div>测试一下</div>
</body>
</html>
css3 currentColor
实战： 鼠标hover时候，图标可以跟着文字一起变色。
HTML结构如下：
<a href="##" class="link"><i class="icon icon1"></i>返回</a>
css
.icon {
display: inline-block;
width: 16px; height: 20px;
background-image: url(../201307/sprite_icons.png);
background-color: currentColor; /* 该颜色控制图标的颜色 */
}
于是，我们想要鼠标hover文字链接，其图标颜色要跟着一起变化，只要改变文字颜色就可以了：
.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
效果
任意替换性
凡事需要使用颜色值的地方，都可以使用currentColor替换，比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等。很灵活，很好用！
在iOS Safari浏览器下(iOS8)下，currentColor还是有一些bug的，例如伪元素hover时候，background:currentColor的背景色不会跟着变化，怎么办呢？等升级，或者使用border来模拟。
网友评论