HTML特效篇-2、背景颜⾊的渐变
渐变通常是⼀种颜⾊逐渐淡⼊另⼀种颜⾊，但是CSS允许你控制颜⾊发⽣的各个⽅⾯，从⽅向和形状到颜⾊以及它们如何从⼀种过渡到另⼀种。实际上，存在三种类型的渐变：
线性渐变
径向渐变
圆锥形渐变
三种渐变对应的语法是：
/* Basic linear gradient examples */
background-image: linear-gradient(#ff8a00, #e52e71);
background-image: linear-gradient(to right, violet, darkred, purple);
background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);
/* Basic radial gradient examples */
background-image: radial-gradient(#ff8a00, #e52e71);
background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);
/* Basic conic gradient examples */
background-image: conic-gradient(#ff8a00, #e52e71);
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);
下⾯来分别为⼤家讲讲这三种渐变。
线性渐变
这也许是我们在⽹页设计中看到的最常见的渐变⽅案了（linear-gradient()）。之所以称它为“线性渐变”，是因为颜⾊是从左到右，从上到下或沿着单个⽅向选择的任何⾓度流动的。
语法：
实现渐变的⽅法就是在css中的 background 或 background-image属性声明。
也就是创建⼀个背景图像，该背景图像是线性渐变，以[朝这个⽅向或⾓度]移动，
并以[⼀种颜⾊]开始，以[另⼀种颜⾊]结束。
官⽅语法：
linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]
实践：
我们来做⼀个从顶部到底部的渐变图案。
.gradient {
background-image: linear-gradient(#ff8a00, #e52e71);
}
上⾯的代码中，我们并没有声明⾓度或渐变⽅向。CSS将 to bottom在这种情况作为默认，其中 #ff8a00 的起始颜⾊是过渡到 #e52e71.
上⾯的是简写，我们也可以写成这样：
/* 声明⽅向 */
background-image: linear-gradient(to bottom, #ff8a00, #e52e71);
/* ⾓度声明 */
background-image: linear-gradient(180deg, #ff8a00, #e52e71);
渐变⽅向
为了使颜⾊变化从左到右，我们在 linear-gradient() 函数的开头传递了⼀个附加参数，以 to 指⽰⽅向的单词开头。让我们将属性值分成⼏⾏，以便轻松地了解发⽣了什么。
.gradient {
background-image:
linear-gradient(
to right,
#ff8a00, #e52e71
);
}
⼀个颜⾊从元素的左边缘过渡到右边缘就搞定了。
to 语法也适⽤于转⾓。例如：如果你希望渐变的轴从左下⾓到右上⾓，则可以声明：
to top right
.gradient {
background-image:
linear-gradient(
to top right,
#ff8a00, #e52e71
);
}
如果要渐变的区域是⼀个正⽅形，则可以声明渐变的⾓度为 45deg。
.gradient {
background-image:
linear-gradient(
45deg,
#ff8a00, #e52e71
);
}
多种颜⾊的渐变
我们不仅限于两种颜⾊的变化。实际上，我们可以根据需要来⽤逗号分隔多种颜⾊。
.gradient {
渐变颜代码大全background-image:
linear-gradient(
to right,
red,
#f06d06,
rgb(255, 255, 0),
green
);
}
上⾯是四种颜⾊的渐变：
那么线性渐变就讲到这⾥。
径向渐变
径向渐变与线性渐变的不同之处在于，它是从⼀个点开始并向外散发的。渐变通常⽤于模拟光源，我们知道它并不是笔直的。这使得径向渐变中的颜⾊之间的过渡显得更加⾃然。
语法：
在background或background-image属性中使⽤ radial-gradient()函数就可以了。
官⽅语法：
radial-gradient(
[ <ending-shape> || <size> ]? [ at <position> ]? ,
<color-stop-list>
);
指定渐变的中⼼、形状（圆形或椭圆形）、⼤⼩。默认情况下，渐变的中⼼是 center（表⽰在中⼼点），渐变的形状是 ellipse（表⽰椭圆形），渐变的⼤⼩是 farthest-corner（表⽰到最远的⾓落）。
⽤法：
.gradient {
background-image:
radial-gradient(
#ff8a00,
#e52e71
);
}
上⾯定义⼀个最基本的径向渐变，我们不声明 shape， size， position 和 color-top 值。
改变形状：
我们可以看到上⾯的图形，shape 是 ellipse（默认）。那是因为元素本⾝不是⼀个完整的正⽅形，在那种情况下，它会假设⼀个 circle。如果我们声明circle 为该shape值，看看会发⽣什么：
.gradient {
background-image:
radial-gradient(
circle,
#ff8a00,
#e52e71
);
}
改变位置
我们可以看到，上⾯演⽰的渐变都是圆形的，并且⼀直沿着最远的边缘逐渐淡⼊最终颜⾊。我们可以显式声明 position 值。以确保淡⼊淡出以 close-side 的 shape ⽅式结束。
.gradient {
background-image:
radial-gradient(
circle closest-side,
#ff8a00,
#e52e71
);
}
其中position的值可以为：closet-corner， closetside，farthest-corner和farthest-side。
径向渐变其实不⼀定从默认中⼼开始，它可以通过 at ⽤作第⼀个参数的⼀部分来指定某个点。例如：
.gradient {
background-image:
radial-gradient(
circle at top right,
#ff8a00,
#e52e71
);
}
看效果：
径向渐变就讲到这⾥。
圆锥渐变
圆锥渐变类似于径向渐变。两者都是圆形，并且使⽤元素的中⼼作为⾊标的源点。但是，如果径向渐变的⾊标从圆的中⼼出发，则圆锥渐变会将它们放在圆周围。
之所以称它们为“圆锥形”，是因为它们看起来像从上⽅观察的圆锥形。
语法：
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)
⽤法：
在最基本的⽔平上
.gradient {
background-image:
conic-gradient(
#ff8a00, #e52e71
);
}
假设渐变的位置从元素（50%，50%）的正中⼼开始，并且均匀分布在两个颜⾊值之间。
其他的写法：
.gradient {
/* Original example */
background-image: conic-gradient(#ff8a00, #e52e71);
/* Explicitly state the location center point */
background-image: conic-gradient(at 50% 50%, #ff8a00, #e52e71);
/* Explicitly state the angle of the start color */
background-image: conic-gradient(from 0deg, #ff8a00, #e52e71);
/* Explicitly state the angle of the start color and center point location */
background-image: conic-gradient(from 0deg at center, #ff8a00, #e52e71);
/
* Explicitly state the angles of both colors as percentages instead of degrees */
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论