零基础求助：如何在指定CSS代码中实现双色分割颜色框？

嗨Gasper！你的需求完全可行，而且有几种简单的方式能实现这个双色分割效果，我会用最易懂的方式给你讲解，毕竟你是零基础~

方法1：用CSS渐变背景（最推荐，不用改任何结构） #

你原来的代码是给元素设置单一背景色，我们只需要把background-color换成background，用线性渐变来实现双色分割。比如想要左右各一半的双色效果，可以改成这样：

.collapse-block .options-swatch--color .color-brown{ 
  background: linear-gradient(to right, #663300 50%, #ff9900 50%); 
}

我给你拆解一下这段代码的意思：

• linear-gradient是CSS里用来创建线性渐变背景的属性
• to right表示渐变方向是从左到右，你也可以改成to bottom（上下分割）、to bottom right（对角线分割）
• #663300 50%代表前50%的区域用你原来的深棕色，#ff9900 50%代表后50%的区域用橙色（你可以把这个颜色代码换成任何你想要的颜色）

如果想要不是五五开的分割，比如30%深棕色，70%另一种颜色，只需要把百分比改成30%和70%就行：

.collapse-block .options-swatch--color .color-brown{ 
  background: linear-gradient(to right, #663300 30%, #ff9900 30%); 
}

小补充（帮你区分HTML和CSS） #

简单说：HTML是用来搭网页“骨架”的（比如这个颜色框本身就是HTML创建的元素），CSS是给这个“骨架”穿“衣服”的（比如设置颜色、大小这些样式），你现在修改的就是CSS样式，不需要动HTML，直接替换你原来的那段代码就生效啦。

如果你的双色分割需求不是我上面说的这种（比如需要带分割线、或者更复杂的样式），可以再详细描述一下，我再给你调整方案~

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