CSS渐变绘制黑白背景栏

CSS渐变绘制黑白背景栏

1. 简单的CSS效果预览

看完了上面的一些CSS样式，你会不会以为就是通过一个image链接的一张图片呢，其实这些都是通过一行CSS实现的。

2. background

• 我们通常会使用background属性来为网页添加背景图片，来实现炫酷的背景效果。其实处理添加外部的背景图片，我们还可以通过radial-gradient、linear-gradien...来自定义特殊的背景效果，这样既能减少图片请求，又不会遭遇UI姐姐的白眼？何乐而不为呢！接下来就一起来看吧！
• 图一的实现：repeating-linear-gradient

background: repeating-linear-gradient(45deg, white, 25px, yellow 25px, 25px, black 50px);

• 图二的实现：radial-gradient

 background: radial-gradient(red, yellow 30%, black 70%, black 100%);

• 图三的实现: linear-gradient

background: linear-gradient(45deg, red 0, green);

没错，你没有看错，就是这么简单，如果还想了解更多CSS实用技能，请继续关注！