如何在两个div元素中实现连贯跨元素渐变效果（Tailwind CSS）

要让两个子div共享父元素的渐变背景并呈现连贯效果，核心思路是让子元素继承父元素的渐变背景，同时确保渐变的坐标系统相对于父元素，这样两个子元素的渐变区域会自然衔接成整体。以下是具体实现：

修改后的代码 #

<div className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
  <!-- 父容器：设置渐变背景，保持相对定位 -->
  <div className="relative w-[300px] h-[300px] bg-[linear-gradient(to_bottom_right,#ff7e5f,#feb47b)]">
    <!-- 子元素1：继承父元素渐变背景，去掉自身背景色 -->
    <div className="rectangle1 absolute left-0 top-0 w-[200px] h-[200px] border-6 border-white bg-inherit"></div>
    <!-- 子元素2：同样继承父元素渐变背景 -->
    <div className="rectangle2 absolute bottom-0 right-0 w-[200px] h-[200px] border-6 border-white bg-inherit"></div>
  </div>
</div>

关键说明 #

• 父容器设置渐变：用bg-[linear-gradient(...)]自定义渐变方向和颜色（示例用了橙红到浅橙的过渡，可直接替换为用户选择的两种颜色）。
• 子元素继承背景：添加bg-inherit让子元素复用父元素的渐变背景，由于父元素是relative定位，渐变的坐标原点以父元素左上角为基准，两个子元素的渐变区域会和父元素的渐变完全对齐，视觉上就是同一个渐变跨两个卡片。
• 边框渐变扩展：如果需要边框也带渐变，可在tailwind.config.js中添加自定义工具类：

  module.exports = {
    theme: {
      extend: {
        borderImage: {
          'gradient': 'linear-gradient(to bottom right, #ff7e5f, #feb47b) 1',
        },
      },
    },
  }
  

  之后子元素用border-image-gradient替代border-white即可实现边框渐变。

纯CSS备选方案 #

若不想依赖Tailwind的继承特性，也可以用原生CSS实现相同效果：

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  background: linear-gradient(to bottom right, #ff7e5f, #feb47b);
}

.rectangle1, .rectangle2 {
  position: absolute;
  border: 6px solid white;
  background: inherit;
  background-attachment: local; /* 强制背景相对于父元素定位 */
}

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