如何创建双轮廓边框？

我使用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

如何创建双轮廓边框？

回答

相关问题