Question

我的名字是Gasper，当我看到如何分割彩色盒子时，我遇到了这个网站（1盒中有2种颜色）。我必须说，我对如何用html代码编程有0个知识，所以如果有人能帮助我，我会非常高兴。

是的，我也不知道如何使用这个网站，对不起。实际上，我不知道这是CSS还是HTML，我甚至不知道它们之间的区别。正如你可能想到的那样，我是一个完整的新秀。

所以我的问题是：

.collapse-block 
.options-swatch--color .color-brown{
  background-color: #663300;
}

如何在此代码中添加2种不同颜色，我不知道甚至可能？

感谢您的帮助，如果我对自己的想法不够清楚，请发表评论，我会回复（如果这就是这个网站的工作方式）。

Answer 1

如果你想在元素中使用两种颜色，一种在顶部，另一种在底部，只需使用垂直运行的CSS线性渐变：

div {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(0deg, red 50%, blue 50%);
}

<div></div>

以下是CSS线性渐变代码的快速浏览：linear-gradient(0deg, red 50%, blue 50%);

0deg从元素的底部到顶部运行
red 50%和blue 50%是色卡。它基本上意味着“从0-50％，使用红色，从50％-100％，使用蓝色。”你当然可以使用更详细的red 0%, red 50%, blue 50%, blue 100%，但是当没有指定开始和结束颜色停止时浏览器只使用与下一个最接近的色块相同的颜色。

Answer 2

Codepen demo

尝试查看一些YouTube教程。搜索绝对初学者的HTML速成课程。

这是HTML和CSS。

不要让你太困惑。 HTML是结构，所以在这个例子中你看到的div。 CSS正在为它设计样式，例如将文本设置为红色，或者使文本变大等。

＆＃13;

.box1{
      width:500px;
      height:500px;
      background:#663300;
    }
    .inside{
      width:500px;
      height:250px;
      background:brown;
    }

＆＃13;

<div class="box1">
          <div class="inside"></div>
        </div>

＆＃13;

Answer 3

你去，这应该工作

＆＃13;

/* CSS */

#box {
  width: 50px;
  height: 50px;
  background: linear-gradient(to bottom, red 50%, blue 50%);
}

＆＃13;

<!-- HTML -->
<div id="box"></div>

＆＃13;

如何制作分色盒？

3 个答案: