设置边框半径时在元素内部绘制CSS边框

问题描述：

我猜标题很难理解，所以我会解释一下。
我想达到这样的效果（从.png文件）：设置边框半径时在元素内部绘制CSS边框

这是半内

enter image description here

带黑线周期我不能不管创建这个内线怎么我试过。

这是我走到这一步：

HTML

<div id='halfCycle'> 
    <div id='halfCycleInner'> 
    </div> 
</div>

CSS

#halfCycle 
{ 
    width: 23px; 
    height: 43px; 
    background-color: #383838; 
    border-top-right-radius: 50px; 
    border-bottom-right-radius: 50px; 
    box-shadow: 2px 0 2px 0px #222; 
} 

#halfCycleInner 
{ 
    position: relative; 
    top: 1px; 
    right:0px; 
    width: 22px; 
    height: 41px; 
    background-color: #383838; 
    border-top-right-radius: 60px; 
    border-bottom-right-radius: 60px; 
    border-right-width: 1px; 
    border-right-color: #212121; 
    border-right-style: solid; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

这里是一个DEMO

这是非常接近，但不一样。任何想法如何使这条内线。

@cheziHoyer：可以在CSS – 2014-09-10 09:46:32

使用伪类[这]（http://jsfiddle.net/7xs2ua9g/）是另一种方式使用，以实现类似的效果径向梯度。浏览器对此的支持相对较少（例如：IE Harry 2014-09-10 11:10:49

答

你可以使用一个伪元素，并给它的边界：

DEMO

HTML：

<div id='halfCycle'></div>

CSS：

#halfCycle 
{ 
    width: 23px; 
    height: 43px; 
    background-color: #383838; 
    border-top-right-radius: 50px; 
    border-bottom-right-radius: 50px; 
    box-shadow: 2px 0 2px 0px #222; 
    position:relative; 
    overflow:hidden; 
} 
#halfCycle:after{ 
    content:''; 
    position:absolute; 
    top:1px; right:1px; 
    width:42px; 
    height:39px; 
    border-radius:100%; 
    border:1px solid #000; 
}

答

有一个解决方案，我希望它能为你工作。

DEMO

.halfCycle{ 
    background: #383838; 
    height: 42px; 
    width: 20px; 
    border:1px solid #202020; 
    border-radius: 0 60px 60px 0; 
    border-left: none; 
    position: relative; 
    box-shadow:5px 0px 5px 0px #222; 
} 
.halfCycle:after{ 
    content: '';border:1px solid #383838; 
    position: absolute; 
    height: 44px; 
    width: 21px; 
    left:0; 
    top:-2px; 
    border-radius: 0 60px 60px 0; 
    border-left:none; 
}

设置边框半径时在元素内部绘制CSS边框

相关推荐