css 使用 background: linear-gradient 实现渐变色

linear-gradient 函数有多个参数，用于定义线性渐变的方向和颜色。下面是 linear-gradient 函数的语法：

background：linear-gradient([direction], color-stop1, color-stop2, ...)

参数说明如下：

• direction：可选参数，表示渐变的方向。可以是以下值之一：
  • to top：从下到上
  • to bottom：从上到下
  • to left：从右到左
  • to right：从左到右
  • to top left：从右下到左上
  • to top right：从左下到右上
  • to bottom left：从右上到左下
  • to bottom right：从左上到右下
  • angle：以度数表示的角度值，如 45deg 表示从左下到右上的方向。
• color-stop1, color-stop2, ...：渐变的颜色阶段。可以是颜色值、颜色值加透明度、颜色值加位置百分比

例子-1：
要创建一个浅红色渐变色的按钮，你可以使用 CSS 来定义按钮的样式。下面是一个示例：

<template>
  <button class="gradient-button">按钮button>
template>

<style>
.gradient-button {
  background: linear-gradient(to right, #FFCCCC, #FF9999);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.gradient-button:hover {
  background: linear-gradient(to right, #FF9999, #FF6666);
}
style>

在上面的代码中，我们使用 linear-gradient 函数来创建一个水平方向的渐变背景色。
to right 参数表示渐变从左到右进行，
我们使用两种不同的浅红色值来定义渐变：#FFCCCC 和 #FF9999，
按钮的文本颜色设置为白色，内边距为 10px 上下，20px 左右，边框为无，边框半径为 5px，字体大小为 16px，鼠标悬停时会有一个渐变背景色的动画效果。

---

例子-2：
如果你想要创建一个从上到下的渐变色按钮，你可以使用 linear-gradient 函数的参数 to bottom，并将渐变色的起始和结束颜色适当调整。下面是一个示例：

<template>
  <button class="gradient-button">按钮button>
template>

<style>
.gradient-button {
  background: linear-gradient(to bottom, #FFCCCC, #FF9999);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.gradient-button:hover {
  background: linear-gradient(to bottom, #FF9999, #FF6666);
}
style>

将 linear-gradient 函数的参数修改为 to bottom，表示渐变从上到下进行，
起始颜色为浅红色 #FFCCCC，结束颜色为深红色 #FF9999，
鼠标悬停时，渐变背景色的起始颜色变为 #FF9999，结束颜色变为 #FF6666