Question

我正在尝试将具有黑色背景的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/

我所遇到的问题是，角落看起来并没有任何黑色边框样式。我该怎么办？

Answer 1

使用此版本的overflow：hidden和外部控制器上的显式边框，没有填充。

.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/

Answer 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/

Answer 3

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

demo jsfiddle

graph-outer是20px高，所以嵌套的条形是18px（20px - 2px（1px顶部/底部填充）），将条纹上的边框半径设置为每个9px（每个角的高度的一半）是均匀的，与父母的曲率相匹配）

.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 */

Answer 4

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

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

应该这样做！我只是抛出一个边界半径并且填充了填充1.应该有一个更简单的方法使用实际的边界属性但我感觉很懒，这就是它

具有实线边界半径的CSS分割条形图

4 个答案: