目录
一、浏览器兼容问题
在不同的浏览器前面要加不同的前缀
-ms- IE浏览器专属的CSS属性需添加-ms-前缀
-moz- 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
-o- Opera浏览器专属的CSS属性需添加-o-前缀
-webkit- 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属
二、线性渐变
2.1 通过background实现：
语法：background:-浏览器前缀-linear-gradient(渐变方向,渐变的颜色)
其中渐变方向的取值可以是关键字和角度，浏览器前缀必须加
关键字的取值有bottom（从下往上渐变）、top（从上往下渐变）、right（从右往左渐变）、left（从左往右渐变）等等
例，取值为left关键字时时
background: -webkit-linear-gradient(left,red,rgb(11, 10, 10));
实现效果，从左往右渐变
例，取值为角度时
background: -webkit-linear-gradient(45deg,red,rgb(11, 10, 10));
实现效果，从45度角开始渐变
2.2 通过background-image实现：
语法：background-image: linear-gradient(渐变方向,渐变颜色);
这种方式不用写浏览器前缀，但是在使用关键字时必须加to，例如to left（从右向左）、to right（从左向右）、to top（从下往上）、to bottom（从上往下）等，同时取值也可以是角度，效果和上面类似。
tip：使用关键字时必须加to
三、重复性线性渐变
3.1 通过background实现：
语法：background:-浏览器前缀-repeating-linear-gradient(渐变方向,渐变的颜色1 颜色1从多少像素开始,变的颜色1 颜色1从多少像素结束)
在属性值之前加repeating，其中渐变颜色和渐变颜色宽度中间用空格隔开，颜色宽度可以用像素或者百分比都行，百分比是相对于父级的宽度，每个颜色之间用逗号隔开。
例：红色从0像素到20像素，黄色从20像素到40像素
background: -webkit-repeating-linear-gradient(left,red,red 20px,yellow 20px,yellow 40px);
实现效果
3.2 通过background-image实现：
例如
background-image: repeating-linear-gradient(to left,red,red 20px,yellow 20px,yellow 40px);
方法也是一样的，使用这个不用加前缀，但是关键字必须加to
四、径向渐变
为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
其中有2中语法
语法一：background-image: radial-gradient(shape size at position, start-color, ..., last-color); 语法二：background: 浏览器前缀-radial-gradient(shape size at position, start-color, ..., last-color);
例。使用background-image实现从中心红色往外面绿色的渐变
background-image: radial-gradient(red, yellow, green);
效果如下
其中参数shape是设置渐变形状的，可以是 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
size 参数定义了渐变的大小。它可以是以下四个值：
- closest-side
- farthest-side
- closest-corner
- farthest-corner
例，当size取值不同时呈现的效果
<style>
#grad1 {
height: 150px;
width: 150px;
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
height: 150px;
width: 150px;
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
#grad3 {
height: 150px;
width: 150px;
background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}
#grad4 {
height: 150px;
width: 150px;
background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
<body>
<h3>径向渐变 - 不同尺寸大小关键字的使用</h3>
<p><strong>closest-side：</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side：</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner：</strong></p>
<div id="grad3"></div>
<p><strong>farthest-corner（默认）：</strong></p>
<div id="grad4"></div>
</body>实现效果
五、重复性径向渐变
在普通渐变径向渐变语法前加上repeating实现重复性径向渐变
例：
background: -webkit-repeating-radial-gradient(center,red 0 33.33%,orange 33.34% 66.66% ,cyan 66.67% 99.99%);
实现效果如下
扫一扫
1095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
