网页制作 
首页 > 网页制作 > 浏览文章

CSS学习笔记之可重复渐变(repeating-linear-gradient)

(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )

CSS repeating-linear-gradient
 

方法

创造一个可重复的渐变。它接受和普通线性渐变相同的属性值并且表现也一致。
 

但它会自动在延伸的方向上重复 color stops。每段起始和结束的 color stop 之间是一个基本的线性渐变。

用一张图看出线性渐变和可重复渐变的区别。

CSS学习笔记之可重复渐变(repeating-linear-gradient)
 

语法

同志,要学会看语法。

Formal grammar: repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) 

where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?

举例

算啦算啦,还是看例子吧。

1、最简单的例子,效果如上面第一张图
 

background-image:
    repeating-linear-gradient(#cdf0ff, #0ca0e9 25%);

2、程序猿GG喜欢的格子衬衫
 

background-image:
    repeating-linear-gradient(transparent, transparent 23%, #1294f6 23%, #1294f6 27%),
    repeating-linear-gradient(90deg, transparent, transparent 23%, #1294f6 23%, #1294f6 27%);

CSS学习笔记之可重复渐变(repeating-linear-gradient)
 

温馨提示:要想实现渐变的边缘是硬的,至少需要四个 color-step,并且中间两个的位置要相等,但颜色不同。

3、条纹纹理
 

background-image:
    repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px)

CSS学习笔记之可重复渐变(repeating-linear-gradient)

4、进度条
 

将上面例子中元素的高度减小,宽度增大,可以得到常见的进度条效果。

  width: 226px;
  height: 20px;
  background-image:
      repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px);

CSS学习笔记之可重复渐变(repeating-linear-gradient)
 

还可以为进度条添加从左向右滚动的动画。想要动画连贯,对元素的宽高有一定的要求。

animation: loading 5s linear infinite;

@keyframes loading {
  from { background-position-x: 0px; }
  to { background-position-x: 226px; }
}

Bootstrap 的进度条是用普通的 linear-gradient 实现的,具体的查查字典。

兼容性

冒着没电的危险查了下 Can I use 简化版 小程序(nm这都有小程序,我眉头一紧,觉得事情并不简单)。

很开心只有0.01%的浏览器不兼容,IE8再见。

CSS学习笔记之可重复渐变(repeating-linear-gradient)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对的支持。

参考

文静的ppt

MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeating-linear-gradient

Codepen:https://codepen.io/binbin/pen/bRawQv

上一篇:css3图片边框border-image的用法
下一篇:CSS设置背景图片模糊内容不模糊的解决方法
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?