渐变
概念
渐变 (gradients) 可以让我们在两个或多个颜色之间进行平稳的过渡。
曾经我们只有使用图像来实现颜色的过渡效果,但渐变的出现,可以让用户使用时 减少下载的时间 和 宽带的使用 。
渐变效果的元素在放大时看起来效果会更好,这是因为渐变是由浏览器自己生成的。
渐变分为 线性渐变 和 径向渐变。
线性渐变(Linear Gradients)
:向下/向上/向左/向右/对角方向径向渐变(Radial Gradients)
:由它们的中心定义
IE9及以下不兼容
径向渐变
径向渐变(放射性的效果),效果和线性渐变类似。
不同的是,默认情况下径向渐变的形状根据元素的形状来计算的。
我们可以指定渐变的中心、形状(圆形或椭圆形)、大小。
默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
语法
:background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape
:形状ellipse
:椭圆,默认circle
:圆角
size
:大小closest-side
:近边farthest-side
:远边closest-corner
:近角farthest-corner
:远角,默认
position
:位置xpx ypx
:具体值 (x轴,y轴)x% y%
:百分比 (x轴,y轴)方位词
注意
:如果只写一个属性,第二个默认是50% (center)
color
:颜色,至少要写两个,可以写多个
不设置形状和大小
<style>
div {
float: left;
margin: 5px;
width: 200px;
height: 100px;
background-image: radial-gradient(red, yellow);
}
.one {
/* 多颜色 */
background-image: radial-gradient(red, pink, yellow);
}
.two {
/* 手动分配颜色 */
background-image: radial-gradient(red 10%, pink 40%, yellow);
}
</style>
<body>
<div></div>
<div class="one"></div>
<div class="two"></div>
</body>
设置形状
我们也可以设置形状,而shape
参数定义了形状,它可以是 circle
(圆形) 或 ellipse
(椭圆形,默认)。
<style>
div {
float: left;
margin: 5px;
width: 200px;
height: 100px;
/* 这里设置三个值的原因是,看起来更加直观 */
/* 圆形 */
background-image: radial-gradient(circle, red, pink, yellow);
}
.one {
/* 椭圆 */
background-image: radial-gradient(ellipse, red, pink, yellow);
}
</style>
<body>
<div></div>
<div class="one"></div>
</body>
设置大小
当然我们也可以自定义大小,而size
参数定义了大小
可以设置的值:
closest-side
:近边farthest-side
:远边closest-corner
:近角farthest-corner
:远角,默认
<style>
div {
float: left;
margin: 5px;
width: 200px;
height: 200px;
/* 需要设置位置,才能直观分辨 */
/* 默认大小,farthest-corner 远角 */
background-image: radial-gradient(farthest-corner at 60% 55%, red, pink, black);
}
.one {
/* closest-corner 近角 */
background-image: radial-gradient(closest-corner at 60% 55%, red, pink, black);
}
.two {
/* closest-side 近边*/
background-image: radial-gradient(closest-side at 60% 55%, red, pink, black);
}
.three {
/* farthest-side 远边 */
background-image: radial-gradient(farthest-side at 60% 55%, red, pink, black);
}
</style>
<body>
<div></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
使用透明度
<style>
div {
margin: 5px;
width: 200px;
height: 100px;
/* 红色,透明度逐渐增大 */
background-image: radial-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
.one {
background-image: radial-gradient(transparent, rgba(255, 0, 0, 1));
}
</style>
<body>
<div></div>
<div class="one"></div>
</body>
重复的径向渐变
语法
:background-image: repeating-radial-gradient(direction, color1, color2, ...);
重复的径向渐变和不重复的径向渐变一样,只是需要手动指定颜色分配,这样才会出现重复样式。
<style>
div {
float: left;
margin: 5px;
width: 200px;
height: 100px;
/* 默认椭圆 */
background-image: repeating-radial-gradient(red, pink 20%);
}
.one {
/* 多个颜色 */
background-image: repeating-radial-gradient(red, pink 20%, black 30%);
}
.two {
/* 指定形状、大小和位置 */
background-image: repeating-radial-gradient(circle closest-side at 60% 55%, red, black 20%);
}
</style>
<body>
<div></div>
<div class="one"></div>
<div class="two"></div>
</body>