前端入门——css 渐变

100人浏览 2024-08-25 09:03:26

什么是css 渐变

CSS 渐变通常是一种颜色淡入到另一种颜色，CSS 允许您控制渐变的方方面面，从方向、形状再到颜色以及它们如何从一种颜色过渡到另一种颜色。实际上，渐变分为三种类型：

线性渐变（linear-gradient）
径向渐变（radial-gradient）
圆锥渐变（conic-gradient）
重复渐变 —— 使用 repeating-linear-gradient 和 repeating-radial-gradient创建线性和径向重复渐变。

下面是基本语法：

/* 线性渐变 */
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);

/* 径向渐变 */
background-image: radial-gradient(#ff8a00, #e52e71);
background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);

/*圆锥渐变 */
background-image: conic-gradient(#ff8a00, #e52e71);
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);

效果如下：

下面是重复渐变：

/*重复渐变 */
background: repeating-linear-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%)；

线性重复渐变

径向重复渐变

所有的 CSS 渐变类型都是一个颜色范围。CSS 渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：

使用多种颜色

无需局限于使用两种颜色，你想使用多少种颜色都可以！默认情况下，所设置的颜色会均匀分布在渐变路径中。

如下示例：

颜色终止位置

你可以通过给每个颜色设置 0，1% 或者 2% 或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， 0% 表示起始点，而 100% 表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在 0% 处停止，而最后一种颜色是 100%，至于其他颜色则是在它邻近的两种颜色的中间停止。

如下示例：