Как создать двойную контурную границу?

Question

Я пишу свой CSS в JS, используя radium и, таким образом, я не могу использовать псевдо классы :after и :before (что было бы сделано очень простым решением). Как создать границу как показано на приведенной ниже диаграмме.

Здесь, серая граница имеет тот же цвет в качестве основного цвета фона, который отделен от белой рамки.

До сих пор мой CSS выглядит следующим образом

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

, который будет производить вывод, как этот

Answer 1

Попробуйте использовать вложенные ящики-тени:

.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>

Такой подход позволяет даже добавить многодисковые границы:

.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>

Answer 2

HaNdTriX ответ «s хорошая один. Другим возможным решением:

.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/.

Answer 3

Вы можете сделать это очень легко, просто добавив цвет фона, отступы и сплошную границу.

Я создал быстрый пример: https://jsfiddle.net/o81rre69/

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

Надеется, что это помогает!