首页 编程语言 css

前端入门——css 渐变


什么是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%，至于其他颜色则是在它邻近的两种颜色的中间停止。

如下示例：

创建实线

要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在 50% 标记处共享一个颜色停止点，即渐变得一半：

改变渐变中心点

默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中，我们将渐变的中心点由 50% 设为 10%。

最后

以上内容，大概介绍了css 渐变所包含的知识点，下面将会分多篇文章来介绍每种渐变的使用方法，你可以关注我，继续学习其它渐变知识。

其它相关文章：

  • css 线性渐变
  • css 径向渐变
  • css 圆锥渐变
  • css 重复渐变


相关推荐