CSS3渐变

作者: 胡育龙 | 来源:发表于2018-09-10 16:42 被阅读0次

css3渐变:线性和径向
CSS3渐变的使用方法:
CSS 渐变
CSS3之渐变
css3背景和border渐变色写法，和使用border-ima
CSS3 渐变（Gradients）
渐变
Css渐变gradients深入理解
css3 线性渐变文字光影
css3渐变属性有哪些？CSS3渐变属性用法

渐变对背景的应用：

1.需求分析：通常对于背景的有这样的需求，条纹背景，或者网格背景，对于这一类需求，简单粗暴的方法是使用背景图片。那么有没有办法减少图片请求，使用CCS来生成呢？linear-gradient：线性渐变提供了可能。

需求：白灰相间的条纹背景

通常，我们是这样使用渐变的：
<div class="liner"></div>
.liner {
width: 300px;
height: 150px;
background: linear-gradient(white, gray);
}

白向灰渐变的背景
这显然不是我们想要的效果，让我们试着修改代码：
规范规定，如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。
<div class="liner"></div>
.liner {
width: 300px;
height: 150px;
background: linear-gradient(white 50%, gray 0);
border: 1px solid #000
}

没有渐变过程的白灰条纹-加了黑色边框

已经很接近我们想要的效果了，利用background-size和背景平铺的原理，继续修改代码：
<div class="liner"></div>
.liner {
width: 300px;
height: 150px;
background: linear-gradient(white 50%, gray 0);
background-size: 30px 30px;
}

这是我们想要的效果
线性渐变接受角度参数，那么获得纵向渐变只需指定角度90deg即可，网格背景即可以这样实现：
{
width: 300px;
height: 150px;
background: white;

background-image:linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);

background-size: 30px 30px;
}

网格背景-桌布
以上效果都是基于横纵渐变产生，那么如果我们要获得斜条纹背景又该怎么办呢？我们先来尝试一下：
.liner {
width: 300px;
height: 150px;
background: linear-gradient(30deg, white 50%, gray 0);
background-size: 30px 30px;
}

30°渐变
结果并不如意，渐变效果是一个个小方块平铺，并不是我们要的斜条纹。其实渐变还有循环式的加强版repeating-linear-gradient，来看看它的效果：
.liner {
width: 300px;
height: 150px;
background: repeating-linear-gradient(30deg, white, white 15px, gray 0, gray 30px);
}