如何在CSS/React中添加线性渐变及为section设置多对角渐变？

一、CSS/React中添加线性渐变的基础方法 #

CSS 写法 #

直接用background或background-image配合linear-gradient()函数就能实现，基本语法：

.selector {
  background: linear-gradient(渐变方向, 颜色1 起始位置, 颜色2 结束位置, ...);
}

• 渐变方向可以用角度（比如45deg表示从左上到右下），也可以用关键字（比如to right是从左到右，to bottom right是从左上到右下）
• 颜色位置是可选的，不写的话颜色会均匀分布

React 写法 #

有两种常用方式：

1. 内联样式：在JSX元素的style属性里定义，注意属性名用驼峰式：

<section style={{
  background: 'linear-gradient(135deg, #ff0000, #00ff00)'
}}>
  {/* 内容 */}
</section>

2. 外部CSS文件：和普通CSS写法完全一样，通过类名或ID绑定到React元素上就行。

二、为id="product"的section添加三个对角渐变 #

要实现第一个从左上角起始、依次排列的三个对角渐变，我们可以通过多层linear-gradient叠加，控制每个渐变的颜色范围和位置来划分区域。这里的对角渐变采用to bottom right（对应从左上到右下）的方向，具体修改后的CSS代码如下：

#product {
  background: #00FFFF;
  /* 三个叠加的对角渐变，按左上到右下顺序划分区域 */
  background:
    linear-gradient(to bottom right, #0000FF 0%, transparent 33.33%),
    linear-gradient(to bottom right, transparent 33.33%, #00FFFF 33.33%, #00FFFF 66.66%),
    linear-gradient(to bottom right, transparent 66.66%, #0080FF 66.66%, #0080FF 100%);
  min-height: 500px;
}

代码说明： #

• 第一个渐变：覆盖左上三分之一区域，从#0000FF过渡到透明
• 第二个渐变：覆盖中间三分之一区域，从透明开始显示#00FFFF，到66.66%位置结束
• 第三个渐变：覆盖右下三分之一区域，从66.66%位置开始显示#0080FF到结束

如果想要渐变之间有柔和过渡，调整颜色停止位置即可，比如把transparent 33.33%改成transparent 30%, #00FFFF 35%，就能让颜色衔接更自然。

内容的提问来源于stack exchange，提问作者ThatGuyNick