我正在使用 radium
在 JS 中编写我的 CSS,因此,我不能使用伪类 :after
和 :before
(这本来可以使解决方案非常简单)。我应该如何创建边框,如下图所示。
这里,灰色边框与主背景颜色相同,由白色边框分隔。
到目前为止我的 CSS 看起来像这样
upload: {
position: "absolute",
left: "0",
top: "0",
overflow: "hidden",
width: "100%",
height: "100%",
borderRadius: "50%",
backgroundColor: "#ccdde5",
cursor: "pointer"
}
这将产生这样的输出
最佳答案
尝试使用嵌套的框阴影:
.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>
关于html - 如何创建双轮廓边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36451732/