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

条纹渐变
<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来模拟。

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. border-radius border-radius请参考文章关于css3的边框的border-radiu...
    苦苦修行阅读 1,199评论 0 0
  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 1,532评论 0 0
  • CSS编码技巧 尽量减少代码重复 多种尺寸的按钮 使用em、rem作为边距的单位,可以让按钮尺寸随着于字号进行缩放...
    alfalfaw阅读 290评论 0 0
  • CSS3背景图像区域 background-clip属性 指定背景绘制区域 background-clip:bor...
    Sallyscript阅读 489评论 0 0
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 2,056评论 0 2