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来模拟。