具有实心边框半径的 CSS 拆分条形图答案

【问题标题】：CSS split bar graph with solid border radius具有实心边框半径的 CSS 拆分条形图
【发布时间】：2013-01-04 08:01:31
【问题描述】：

我正在尝试让具有黑色背景的 div 容器替代具有边框半径的条形图的边框样式。这是 HTML/CSS：

HTML：

<div class="graph-outer">
    <div class="inner-left-cap"></div>
    <div class="inner-left-bar">40%</div>
    <div class="inner-right-bar">60%</div>
    <div class="inner-right-cap"></div>
</div>

CSS：

.graph-outer {
    background-color: black;
    height: 20px;
    width: 300px;   
    border-radius: 10px;
    padding: 1px;
}

.inner-left-cap {
    background: orange;
    width: 2%;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    float: left;
}

.inner-left-bar {
    background: orange;
    width: 38%;
    height: 100%;
    text-align: center;
    float: left;
}

.inner-right-cap {
    background: red;
    width: 2%;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    float: left;
}

.inner-right-bar {
    background: red;
    width: 58%;
    height: 100%;
    text-align: center;
    float: left;
}

http://jsfiddle.net/2ZkDz/115/

我遇到的问题是角落看起来好像没有任何黑色边框样式。我能做什么？

【问题讨论】：

标签： border css

【解决方案1】：

在你的外部控制器上使用带有溢出：隐藏和显式边框且没有填充的版本。

.graph-outer {
    background-color: black;
    height: 20px;
    width: 300px;   
    border:1px solid black;
    border-radius: 10px;
    overflow:hidden;
}

.inner-left-cap {
    background: orange;
    width: 2%;
    height: 100%;
    float: left;
}

.inner-left-bar {
    background: orange;
    width: 38%;
    height: 100%;
    text-align: center;
    float: left;
}

.inner-right-cap {
    background: red;
    width: 2%;
    height: 100%;
    float: left;
}

.inner-right-bar {
    background: red;
    width: 58%;
    height: 100%;
    text-align: center;
    float: left;
}

http://jsfiddle.net/2ZkDz/116/

【讨论】：

呸，外部的明确边框是如此简单。我猜我没有脑子。
没有溢出：隐藏，里面的矩形容器会破坏圆角。

【解决方案2】：

我已经更新了你的 CSS，我将上限更改为 3%，并使条形变小。里面的酒吧正在越过帽子。

.graph-outer {
    background-color: black;
    height: 20px;
    width: 300px;   
    border-radius: 10px;
    padding: 1px;
}

.inner-left-cap {
    background: orange;
    width: 3%;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    float: left;
}

.inner-left-bar {
    background: orange;
    width: 37%;
    height: 100%;
    text-align: center;
    float: left;
}

.inner-right-cap {
    background: red;
    width: 3%;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    float: left;
}

.inner-right-bar {
    background: red;
    width: 57%;
    height: 100%;
    text-align: center;
    float: left;
}

http://jsfiddle.net/2ZkDz/119/

【讨论】：

【解决方案3】：

http://jsfiddle.net/2ZkDz/120/

border-radius: 10px;
padding: 2px;

应该这样做！我只是扔了一个边框半径并增加了填充 1。应该有一种更简单的方法使用实际的边框属性，但我觉得很懒，这就是它

【讨论】：

虽然边角看起来仍然不一致。 ://
不想使用 2px 的内边距。边框太厚。

【解决方案4】：

没有端盖的解决方案（这样条形宽度与值匹配）

demo jsfiddle

graph-outer 高 20 像素，因此嵌套条为 18 像素（20 像素 - 2 像素（1 像素顶部/底部填充）），将条上的边框半径设置为每个 9 像素（高度的一半，因此每个角都是统一的并匹配父母曲率）

.inner-left-bar {
    background: orange;
    width: 40%;
    height: 100%;
    text-align: center;
    float: left;
    border-radius:9px 0 0 9px; /* add this */
}

.inner-right-bar {
    background: red;
    width: 60%;
    height: 100%;
    text-align: center;
    float: left;
    border-radius:0 9px 9px 0; /* and this */
}

/* and drop the end-caps */

【讨论】：

这就是为什么我不能那样做，据我所知：jsfiddle.net/2ZkDz/122。在这种情况下，当右边栏为 100%，左边为 0 时，我将只用红色填充左边的 cap 以保留边框半径。
@keruilin 一种解决方案是向栏添加 100% 类，例如 jsfiddle.net/2ZkDz/123。当其中一个条为 98% 或更高时，为端盖着色不会出现类似的问题吗？
是的，我需要解决这个问题。 :) 也许两个条之间有一些左右填充。