Question

这是我的问题：

http://f.cl.ly/items/1m2o431f2k1J2E1t3X0H/Image%202014-04-18%20at%202.24.23%20%D0%BF%D0%BE%D1%81%D0%BB%D0%B5%20%D0%BF%D0%BE%D0%BB%D1%83%D0%B4%D0%BD%D1%8F.png

<div class="wrap">
    <div class="inner"></div>
</div>

.wrap {
    position: relative;
    width: 200px; 
    height: 66px;
    background: black;
    overflow: hidden;
    border-radius: 100px;
}

.inner {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    background: white;
}

http://jsfiddle.net/cjW7Q/1/

注意右侧的黑色细线。任何想法如何摆脱它？

更新

有很多变通办法，但问题是溢出：隐藏无法正常工作。想象一下，而不是.inner，我有一个图像，我想用转换（硬件加速）转换。我稍后会尝试更新演示。

Answer 1

<edit>多个bg混合图像和渐变也可用于动画，无需额外标记 DEMO </edit>

这是一个共同的改变，你也可以在FF中看到它。

我会说，反过来描绘它： .wrap甚至不需要bckground颜色。 http://jsfiddle.net/cjW7Q/2/

.wrap {
    position: relative;
    width: 200px; 
    height: 66px;
    overflow: hidden;
    border-radius: 100px;
}

.inner {
    position: absolute;
    top: 0;
    width: 50%;
    left:0;
    bottom: 0;
    background: black;
}

否则你可以使用渐变而不使用内部元素：

.wrap {
    position: relative;
    width: 200px; 
    height: 66px;
    overflow: hidden;
    border-radius: 100px;
    background:linear-gradient(to left,white 50%,black 50%);
}

<强> DEMO

Answer 2

这里是Work Around

.inner {
 position: absolute;
 top: 0;
 left: 0;
 right: 50%;
 bottom: 0;
 background: black;
}

为父元素应用它的父母相同的背景（这里根本不需要背景）

Answer 3

添加＆＃34; border-right-width：0px;＆＃34;到.wrap。

Answer 4

试试这个CSS，

.wrap {
position: relative;
width: 200px; 
height: 66px;
background: black;
overflow: hidden;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}

.inner {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    bottom: 0;
    background: white;
}

DEMO

Answer 5

border:0px 
paddind : 10 px
background:#FFF

border-radius + overflow：hidden =细黑线

5 个答案: