如何創建雙輪廓邊框？

我使用radium寫我的CSS在JS，因此，我不能使用僞類:after和:before（這會已經做出解決方案很簡單）。我應該如何創建如下圖所示的邊框。如何創建雙輪廓邊框？

這裏，灰色的邊框是顏色爲主要背景色，它是由白色邊界分開相同。

到目前爲止，我的CSS看起來像這樣

upload: { 
    position: "absolute", 
    left: "0", 
    top: "0", 
    overflow: "hidden", 
    width: "100%", 
    height: "100%", 
    borderRadius: "50%", 
    backgroundColor: "#ccdde5", 
    cursor: "pointer" 
}

這會產生這樣的

來源

2016-04-06 zaq

使用白色邊框和你_bluish_箱陰影 - [小提琴]（https://jsfiddle.net/amkda8hk/） – Vucko

輸出嘗試使用嵌套的盒子陰影：

.circle-border-2 { 
 
    border-radius: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 10px; 
 
    background-color: #ccdde5; 
 
    box-shadow: 0 0 0 5px white, 
 
       0 0 0 10px #ccdde5; 
 
}

<div class="circle-border-2"></div>

這種方法甚至允許你添加multible邊框：

.circle-unicorn { 
 
    border-radius: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 50px; 
 
    background-color: white; 
 
    box-shadow: 0 0 0 5px #9932FF, 
 
       0 0 0 10px #B231FD, 
 
       0 0 0 15px #FF31EB, 
 
       0 0 0 20px #FF3291, 
 
       0 0 0 25px #FE3030, 
 
       0 0 0 30px #FE6031, 
 
       0 0 0 35px #FFC132, 
 
       0 0 0 40px #30FE5B, 
 
       0 0 0 45px #5230FF, 
 
       0 0 0 50px #3E25BF; 
 
}

<div class="circle-unicorn"></div>

來源

2016-04-06 12:57:03 HaNdTriX

麒麟圈訣竅是很酷 – zaq

HaNdTriX的回答是一個很好的一個。另一種可能的解決方案：

.circle-shadow-border { 
 
    border-radius: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: gray; 
 
    box-shadow: 0px 0px 0px 5px white inset; 
 
    border: solid 5px gray; 
 
    margin: 20px; 
 
}

<div class="circle-shadow-border"></div>

或者使用background-clip: content-box;：

.circle-border-backclip { 
 
    border-radius: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: gray; 
 
    margin: 20px; 
 
    border: solid 5px gray; 
 
    padding: 5px; 
 
    background-clip: content-box; /* support: IE9+ */ 
 
}

<div class="circle-border-backclip"></div>

你可以看到https://css-tricks.com/snippets/css/multiple-borders/更多信息。

來源

2016-04-06 13:01:48 ehsan88

通過簡單添加背景顏色，填充和實心邊框，您可以非常輕鬆地完成此操作。

我創建了一個簡單的例子：https://jsfiddle.net/o81rre69/

.upload { 
     border-radius: 50%; 
     padding: 5px; 
     height: 150px; 
     width: 150px; 
     background: #FFF; 
     border: 3px solid #BBB; 
    }

希望它能幫助！

來源

2016-04-06 13:02:20 Boratzan

如何創建雙輪廓邊框？

回答

相關問題