CSS如何实现div25%区域为纯色、剩余75%为另一纯色无过渡效果

现有代码问题 #

你当前的HTML结构如下：

<div class="sh-continer-fluid bg-blue"></div>

需求是将该div从左到右25%区域设为蓝色、剩余75%设为白色，要求色块边界清晰无过渡。你最初写的CSS存在两个核心问题：

• linear-gradient默认会对两个不同位置的色标做平滑插值过渡，你设置的粉色（#FFC0CB）在25%位置、青色（#00FFFF）在75%位置，中间25%-75%的区间自然会生成渐变效果
• 颜色值和需求不符，且background简写属性会覆盖你之前写的background-color规则，导致那行蓝色背景色代码完全不生效

正确实现代码 #

方案1：硬边渐变（推荐，代码最简洁） #

只需要让两个颜色的色标位置重合，就可以消除过渡，直接生成锐利的色块边界：

.bg-blue {
    /* 从左到右渐变，0-25%为蓝色，25%-100%为白色，无过渡 */
    background: linear-gradient(90deg, #5366ea 25%, #ffffff 25%);
}

实现原理：CSS线性渐变规则中，如果相邻两个色标的位置值相同，浏览器会直接在该位置做颜色硬切换，不会生成任何过渡效果。

方案2：分背景定位（兼容极低版本浏览器） #

如果需要兼容不支持硬边渐变的老旧浏览器，可以用纯色背景叠加定位的方式实现：

.bg-blue {
    background: #ffffff; /* 白色作为基底铺满整个容器 */
    background-image: linear-gradient(#5366ea, #5366ea); /* 生成无渐变的纯蓝色层 */
    background-size: 25% 100%; /* 蓝色层宽度占容器25%，高度铺满 */
    background-repeat: no-repeat; /* 蓝色层不平铺 */
    background-position: left top; /* 蓝色层固定在容器左侧 */
}

效果验证 #

上述两种方案渲染后，容器左侧25%宽度为指定蓝色#5366ea，右侧75%为纯白色，两个色块边界锐利，无任何模糊过渡效果，完全匹配需求。

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