設置邊框半徑時在元素內部繪製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

這是非常接近，但不一樣。任何想法如何使這條內線。

來源

2014-09-10 cheziHoyzer

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

使用僞類[這]（http://jsfiddle.net/7xs2ua9g/）是另一種方式使用，以實現類似的效果徑向梯度。瀏覽器對此的支持相對較少（例如：IE <10不支持它），因此web-tiki的答案仍然是最好的。只是想表明它也可以通過這種方式來完成。 – 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; 
}

來源

2014-09-10 09:42:32

有一個解決方案，我希望它能爲你工作。

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; 
}

來源

2014-09-10 10:00:02

設置邊框半徑時在元素內部繪製CSS邊框

回答

相關問題