半徑不同顏色的css邊框

Question

是否可以用兩種顏色製作圓角和虛線的div邊框，如果是，如何？

現在我所做的是：

.container{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
.years { 
 
    display: block; 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 0px; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background: #1c1e2e; 
 
    z-index: 999; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    padding: 60px 30px; 
 
} 
 
.years:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 140px; 
 
    height: 155px; 
 
    top: -17px; 
 
    left: -17px; 
 
    border-radius: 100%; 
 
    border-right: 3px dotted #000; 
 
    border-top-left-radius: 100%; 
 
    border-bottom-left-radius: 100%; 
 
} 
 
.years:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 140px; 
 
    height: 155px; 
 
    top: -17px; 
 
    left: -17px; 
 
    border-radius: 100%; 
 
    border-left: 3px dotted #dfbc82; 
 
    border-top-left-radius: 100%; 
 
    border-bottom-left-radius: 100%; 
 
}

<div class="container"> 
 
    <div class="years"></div> 
 
</div>

，但我喜歡對子級做出這樣的：

沒有任何smoothiness，並不能弄清楚如何使打印屏幕上的正常點... 任何想法？欣賞任何建議..：/

Answer 1

要做到這一點，你必須定義所有的div的角落，之後做一個簡單的循環得到垂直位置，效仿：

.container{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
.years { 
 
    display: block; 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 150px; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background: #1c1e2e; 
 
    z-index: 999; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
} 
 
.years:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -17px; 
 
    left: -17px; 
 
    bottom:-17px; 
 
    right:-17px; 
 
    border-radius: 100%; 
 
    border-right: 3px dotted #000; 
 
    border-bottom: 3px dotted #000; 
 
    border-top: 3px dotted transparent; 
 
    border-left: 3px dotted transparent; 
 
    transform: rotate(-45deg); 
 
} 
 
.years:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -17px; 
 
    left: -17px; 
 
    bottom:-17px; 
 
    right:-17px; 
 
    border-radius: 100%; 
 
    border-left: 3px dotted #dfbc82; 
 
    border-top: 3px dotted #dfbc82; 
 
    border-bottom: 3px dotted transparent; 
 
    border-right: 3px dotted transparent; 
 
    transform: rotate(-45deg); 
 
}

<div class="container"> 
 
    <div class="years"></div> 
 
</div>

Answer 2

通過簡單地在底部，左側，頂部和右側邊框單獨着色，您可以將邊框的顏色沿正常元素的中間分割，而無需任何僞元素的幫助。

這個問題，因爲你會看到，是這不是直接從頂部拆分底部，它在一個很小的角度劃分：

div { 
 
    font-size: 24px; 
 
    height: 192px; 
 
    line-height: 192px; 
 
    text-align: center; 
 
    width: 192px; 
 
    
 
    border-radius: 100%; 
 
    border-style: dotted; 
 
    border-width: 4px; 
 
    
 
    border-bottom-color: blue; 
 
    border-left-color: blue; 
 
    border-right-color: red; 
 
    border-top-color: red; 
 
}

<div> 
 
    Foobar 
 
</div>

要解決這一點，我們可以簡單地旋轉45度我們的元素：

div { 
 
    font-size: 24px; 
 
    height: 192px; 
 
    line-height: 192px; 
 
    text-align: center; 
 
    width: 192px; 
 
    
 
    border-radius: 100%; 
 
    border-style: dotted; 
 
    border-width: 4px; 
 
    
 
    border-bottom-color: blue; 
 
    border-left-color: blue; 
 
    border-right-color: red; 
 
    border-top-color: red; 
 
    
 
    transform: rotateZ(45deg); 
 
}

<div> 
 
    Foobar 
 
</div>

唯一的問題是現在我們的內部內容也隨之旋轉，所以你可以簡單地包裹在內部元件和旋轉該元素相反的方式：

div { 
 
    font-size: 24px; 
 
    height: 192px; 
 
    line-height: 192px; 
 
    text-align: center; 
 
    width: 192px; 
 
    
 
    border-radius: 100%; 
 
    border-style: dotted; 
 
    border-width: 4px; 
 
    
 
    border-bottom-color: blue; 
 
    border-left-color: blue; 
 
    border-right-color: red; 
 
    border-top-color: red; 
 
    
 
    transform: rotateZ(45deg); 
 
} 
 

 
span { 
 
    display: block; 
 
    transform: rotateZ(-45deg); 
 
}

<div> 
 
    <span>Foobar</span> 
 
</div>

CSS的所有現代瀏覽器都支持trasnform屬性，但可能需要前綴爲舊版瀏覽器。檢查http://caniuse.com/#feat=transforms2d瞭解更多詳情。