作者:小超201209 | 来源:互联网 | 2023-01-05 14:10
我刚收到设计师的PSD,大部分的部分都可以通过CSS实现,我只想做一件我觉得难以理解的是一个有2个边框的圆圈.我可以使用bg图像方法,但使用CSS3是理想的.
使用CSS的一个主要原因是在几个不同的元素上使用了相同的边框.
1> Mohammad Usm..:
您可以使用::before
或::after
伪元素来创建此形状:
.btn-holder {
background: darkgreen;
padding: 30px;
}
.btn {
background: transparent;
justify-content: center;
align-items: center;
position: relative;
color: #fff;
display: flex;
height: 100px;
width: 100px;
}
.btn,
.btn::after {
border: 1px solid #fff;
border-radius: 100%;
}
.btn::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 0;
top: -4px;
}