半径不同颜色的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了解更多详情。