css 偏僻属性

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实现水平条纹背景，垂直条纹背景，斜向条纹背景

条纹渐变

测试一下

参考

css3 currentColor

实战： 鼠标hover时候，图标可以跟着文字一起变色。
HTML结构如下：

返回

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

引自-背景色镂空技术与currentColor demo