5

境界線が 1 つの円がありますが、異なる色の境界線が 2 つある円を実現する方法があるかどうかを知りたいです。次のCSSプロデュースサークルがあります：

.circle {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 1.5px solid #fff;
    font-family: Cambria;
    font-size: 11px;
    color: white;
    line-height: 20px;
    text-align: center;
    background: #3E78B2;
}

.circle:hover {
    width: 27px;
    height: 27px;
    border-radius: 18px;
    font-size: 12px;
    color: white;
    line-height: 27px;
    text-align: center;
    background: #3E78B2;
}

ここにjsFiddleへのリンクがあります

現在、白い境界線があることがわかります。白い枠の上に別の枠を追加したいと思います。

アイデアや提案があれば教えてください。

4

2 に答える 2

11

こんにちは、これも作ることができます：

.container {
    background-color: grey;
    height: 200px;
    padding:10px; // ADD THIS ALSO
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 1.5px solid #fff;
    font-family: Cambria;
    font-size: 11px;
    color: white;
    line-height: 20px;
    text-align: center;
    background: #3E78B2;
    box-shadow: 0 0 0 3px #002525; // JUST ADD THIS LINE AND MODIFY YOUR COLOR
}

利点は、次のように変更してぼかし効果を適用できることです。

box-shadow: 0 0 3px 3px #002525;
于 2013-07-10T01:08:00.473 に答える