复杂的背景图案
上一篇文章中我们学会了如何使用渐变实现条纹状的背景,但是实际上条纹背景并不是我们能实现的唯一的背景图案,利用渐变我们可以实现很多更为复杂的图案,本篇会介绍一些其他的简单而实用的背景图案。
背景知识:CSS线性渐变,background-size
1 | background: linear-gradient(red, yellow, blue); |
to right
代表渐变偏移角度,to right
(相当于90deg
)red,yellow,blue
代表渐变色,表示从red - yellow - blue (相当于red 0% - yellow 50% - blue 100%)
。 意思是从0%距离处为red,通过0%-50%的距离渐变到yellow,再通过50%-100%的距离渐变到blue。0
) 等价于 linear-gradient(90deg, red 0%, yellow 50%, blue 50%
) 因为当你的色标位置值设置为0时,会自动调整为前一个色标位置值。20%
, yellow 20%
, blue 100%); 代表从20%处颜色突然变化为yellow。(20%-20%之间没有渐变距离)20%
, yellow 50%
, blue 100%); 代表从20%-50%
处都是黄色,然后从50%处开始渐变直到100%变化为blue上篇文章讲述了实现条纹效果所使用的CSS特性并实现了水平和垂直条纹,接下来我们来实现斜向条纹。
今天涉及两个属性:
- overscroll: scroll-y / scroll-x / scroll;
- border-radius: 10px;
1 / 2