微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决框、线性渐变、css 和 javascript 更新

我正在使用 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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。