css3 渐变(gradients)
CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,我在了解了这个属性前都是使用背景图来实现这个效果,现在通过使用 CSS3 的渐变(gradients)即可实现。
此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
先来介绍一下渐变的类型
一、线性渐变(点到点的渐变)
- 语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
- direction:默认为to bottom,即从上向下的渐变;
还可以设置为度数。自上向右 (0度 —— 90度的变化) - stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。
二、径向渐变(点到四周的渐变)
- 语法一:
background-image: radial-gradient(position, shape, size, start-color, …, last-color);
注:shape和size 不能一起使用; - 语法二:
background-image: radial-gradient(shape size at position, start-color, …, last-color);
- position:渐变起点的位置,可以为百分比,默认是图形的正中心。
- shape:渐变的形状,
ellipse表示椭圆形(默认值)
circle表示圆形。
如果元素形状为正方形的元素,则ellipse和circle显示一样。 - size:渐变的大小,即渐变到哪里停止,它有四个值。
closest-side:最近边;
farthest-side:最远边;
closest-corner:最近角;
farthest-corner:最远角。
然后我们逐一举例进行说明:
先直观感受一下这两种渐变类型的不同:
先从线性渐变说起:
- 语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
- direction:默认不写为to bottom,即从上向下的渐变;
还可以设置为度数。自上向右 (0度 —— 90度的变化)
.box1{background-image:linear-gradient(to left,pink,skyblue,purple);}
方向设置为to left 的效果:
- stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。
颜色分段
.box1{background-image:linear-gradient(pink 20%,skyblue 30%,skyblue 60%,purple);}
当不添加分布位置时,默认均匀分布,
如上代码,则表示0 ~ 20%为粉色,20 ~ 30%为粉色渐变到蓝色,30% ~ 60% 为蓝色,60% ~ 100~为蓝色到紫色渐变。
.box1{background-image:linear-gradient(pink 10%,skyblue 70%,purple);}
样式效果为下图:
径向渐变
- 语法一:
background-image: radial-gradient(position, shape, size, start-color, …, last-color);
注:shape和size 不能一起使用; - 语法二:
background-image: radial-gradient(shape size at position, start-color, …, last-color);
- position:渐变起点的位置,可以为百分比,默认是图形的正中心。
.box2{background-image:radial-gradient(pink,skyblue,purple);}
默认效果样式
.box2{background-image:-webkit-radial-gradient(left top,pink,skyblue,purple);}
渐变起点改为 左上角后的效果。
.box2{background-image:-webkit-radial-gradient(50% top,pink,skyblue,purple);}
- shape:渐变的形状
ellipse表示椭圆形(默认值)
circle表示圆形。
如果元素形状为正方形的元素,则ellipse和circle显示一样。
.box2{background-image:-webkit-radial-gradient(pink,skyblue,purple);}
默认情况下的椭圆效果
.box2{background-image:-webkit-radial-gradient(circle,pink,skyblue,purple);}
渐变形状为圆形效果
- size:渐变的大小,即渐变到哪里停止,它有四个值。
closest-side:最近边;
farthest-side:最远边;
closest-corner:最近角;
farthest-corner:最远角。
将开始位置设置为水平方向10% 垂直方向30%,未设置渐变大小的效果如下图:
.box2{background-image:-webkit-radial-gradient(10% 30%,farthest-side,pink,skyblue,purple);}
渐变大小为到最远边为止时的效果如下图
.box2{background-image:-webkit-radial-gradient(10% 30%,closest-side,pink,skyblue,purple);}
渐变大小为到最近边为止时的效果如下图
.box2{background-image:-webkit-radial-gradient(10% 30%,closest-corner,pink,skyblue,purple);}
渐变大小为到最近角为止时的效果如下图
.box2{background-image:-webkit-radial-gradient(10% 30%,farthest-corner,pink,skyblue,purple);}
渐变大小为到最远角为止时的效果如下图
运用这个渐变还可以实现用代码画一道彩虹哦~~