如何制作拆分色框？
如何制作拆分色框？
提问于 2018-05-20 19:34:09
我的名字是Gasper，当我在寻找如何使一个彩色盒子分裂(两种颜色在一个盒子中)时，我偶然发现了这个网站。我必须说，我对如何使用html代码编程一无所知，所以如果有人能帮助我，我将非常高兴。
是的，我也不知道如何使用这个网站，对不起。实际上，我不知道这是CSS还是HTML，我甚至不知道它们之间的区别。正如你可能知道的，我完全是个新手。
所以我的问题是：
.collapse-block
.options-swatch--color .color-brown{
background-color: #663300;
}我如何在这段代码中添加两种我不知道的不同颜色，这是可能的吗？
谢谢你的帮助，如果我不清楚我想要什么，请评论，我会回复的(如果这就是这个网站的工作方式)。
回答 3
Stack Overflow用户
发布于 2018-05-20 19:42:29
如果您想在元素中使用两种颜色，一种在顶部，另一种在底部，只需使用垂直运行的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从elementred 50%的底部到顶部运行，blue 50%是色标。它的基本意思是“从0-50%使用红色，从50%-100%使用蓝色)。你当然可以使用更详细的red 0%, red 50%, blue 50%, blue 100%，但当没有指定开始和结束颜色停止时，浏览器只使用与下一个最近的颜色停止相同的颜色。
Stack Overflow用户
发布于 2018-05-20 19:42:36
尝试查看一些YouTube教程。搜索HTML速成课程的绝对初学者。
这既是HTML也是CSS。
为了不让你太困惑。HTML就是它的结构，所以在这个例子中，你在这里看到的div。而CSS正在设计它的样式，就像将文本设置为红色，或者使文本变大等等。
.box1{
width:500px;
height:500px;
background:#663300;
}
.inside{
width:500px;
height:250px;
background:brown;
}<div class="box1">
<div class="inside"></div>
</div>
Stack Overflow用户
发布于 2018-05-20 19:45:16
这就对了，这应该可以用
/* CSS */
#box {
width: 50px;
height: 50px;
background: linear-gradient(to bottom, red 50%, blue 50%);
}<!-- HTML -->
<div id="box"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50434409
复制相关文章
相似问题
腾讯云开发者
