框、线性渐变、css 和 javascript 更新

编程问答 2022-05-01

问题描述

我正在使用 react JS，我正在寻找不同 Box 中线性渐变的解决方案。当我连续三个相同的盒子时。 我有一个例子： 当我有三个这样的盒子时： enter image description here

应该是这样的：

enter image description here

你对此有什么想法吗？

谢谢；

解决方法

.box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.box--gradient {
  background-image: linear-gradient(#2a6496,#fff 70%,#011852);
}
<div class="box box--gradient"></div>

,

您可以为容器提供背景，并使用另一个元素来覆盖子元素中所有未使用的空间（并隐藏该区域中的背景）

html,body {
  background-color: white;
}
.cont {
  display:flex;
  background: linear-gradient(to right,red,yellow,green,blue) no-repeat;
}
.spacer {
  width: 100%;
  background-color: white;
}
.box {
  width: 100px;
  height: 100px;
  flex-shrink:0;
  display: flex;
  justify-content:center;
  align-items:center;
}
<h1>One box</h1>
<div class="cont">
<div class="box">1</div>
<div class="spacer"></div>
</div>
<h1>Three boxes</h1>
<div class="cont">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="spacer"></div>
</div>

更新

根据最后一条评论，我知道连续会有几个不同的渐变框，而最多 3 个可以连续出现，在这种情况下它们应该折叠。在这种情况下，我提供：

.cont {
  display: flex;
  overflow: auto;
}
.grad-1 {
  background-image: linear-gradient(to right,green);
}
.grad-2 {
  background-image: linear-gradient(to right,blue,purple,pink);
}
.grad-3 {
  background-image: linear-gradient(to right,white,silver,black);
}
[class^=grad]{
  width: 100px;
  height: 100px;
  flex-shrink:0;
  background-size: 300% 100%;
  background-position: top left;
}
.grad-1+.grad-1,.grad-2+.grad-2,.grad-3+.grad-3 {
    background-position: top center;
}
.grad-1+.grad-1+.grad-1,.grad-2+.grad-2+.grad-2,.grad-3+.grad-3+.grad-3 {
    background-position: top right;
}
<div class="cont">
<div class="grad-1"></div>
<div class="grad-1"></div>
<div class="grad-3"></div>
<div class="grad-2"></div>
<div class="grad-2"></div>
<div class="grad-2"></div>
<div class="grad-3"></div>
<div class="grad-1"></div>
<div class="grad-1"></div>
<div class="grad-3"></div>
<div class="grad-3"></div>
<div class="grad-3"></div>
</div>

,

您可以添加大背景并更改其位置

body {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right,red);
  background-size: 1300%;
}

.box:nth-child(1) {
  background-position: 0 0;
}

.box:nth-child(2) {
  background-position: 8.33% 0;
}

.box:nth-child(3) {
  background-position: 16.66% 0;
}

.box:nth-child(4) {
  background-position: 25% 0;
}

.box:nth-child(5) {
  background-position: 33.33% 0;
}

.box:nth-child(6) {
  background-position: 41.66% 0;
}

.box:nth-child(7) {
  background-position: 50% 0;
}

.box:nth-child(8) {
  background-position: 58.33% 0;
}

.box:nth-child(9) {
  background-position: 66.66% 0;
}

.box:nth-child(10) {
  background-position: 75% 0;
}

.box:nth-child(11) {
  background-position: 83.33% 0;
}

.box:nth-child(12) {
  background-position: 91.66% 0;
}

.box:nth-child(13) {
  background-position: 100% 0;
}
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>

或将您的盒子添加到具有此背景的容器中

.container {
  display: flex;
  background: linear-gradient(to right,red);
}

.box {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

,

一个简单的解决方案：

你有 3 个盒子，所以，为第一个添加颜色，为第二个添加渐变，为最后一个添加颜色......（查看我的演示）

App.js

import React from 'react';
import './style.css';

export default function App() {
  return (
      <div>
        <div className="row">
          <div className="box"> </div>
          <div className="box"> </div>
          <div className="box"> </div>
        </div>
      </div>
  );
}

Styles.css

.row {
  display: flex;
}
.row .box:first-of-type {
  height: 150px;
  width: 33%;
  border: 1px solid black;
  background: #44107a;
}
.row .box {
  height: 150px;
  width: 33%;
  border: 1px solid black;
  background-image: linear-gradient(90deg,#44107a 0%,#ff0032 100%);
}
.row .box:last-of-type {
  height: 150px;
  width: 33%;
  border: 1px solid black;
  background: #ff0032;
}

演示：Stackblitz

javascriptmaterial-uireactjsreactjs