0

我试图让具有黑色背景的 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/

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

4

4 回答 4

2

将此版本与溢出:隐藏和外部控制器上的显式边框一起使用,并且没有填充。

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

于 2013-01-03T23:53:50.677 回答
0

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

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

That should do it! I just threw on a border-radius and bumped up the padding 1. There should be an easier way using the actual border property but im feeling lazy and this does it

于 2013-01-03T23:56:30.710 回答
0

我已经更新了您的 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/

于 2013-01-03T23:53:52.060 回答
0

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

演示 jsfiddle

高度为20graph-outer像素,因此嵌套条为 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 */
​
于 2013-01-03T23:55:15.443 回答