저는 PSD를 디자이너로부터 받았고 CSS를 통해 대부분의 부품을 얻을 수있었습니다. 단 한 번의 비트만으로도 작업을 수행 할 수 있었고 두 개의 경계가있는 원으로 생각됩니다. bg 이미지 접근 방식을 사용할 수 있지만 CSS3를 사용하는 것이 이상적입니다.이중 테두리가있는 CSS 동그라미
CSS를 사용하는 주된 이유 중 하나는 여러 다른 요소에서 동일한 테두리가 사용되었다는 것입니다.
당신이 시도 할 수 :
: 원에 대한 2 테두리 만들기 위해 후.green{
width: 300px;
height: 300px;
background-color: green;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
position: relative;
width: 150px;
height: 150px;
border: 1px solid #fff;
border-radius: 50%;
}
.circle::after {
content: '';
width: 150px;
height: 150px;
border: 1px solid #fff;
border-radius: 50%;
display: block;
margin: -4px 2px;
}<div class="green">
<div class="circle"></div>
</div>이 모양을 만들 ::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;
}<div class="btn-holder">
<button type="button" class="btn">Register</button>
</div>
button{
position:relative;
margin: 20px auto;
border-radius: 50%;
border: 2px solid transparent;
border-bottom: none;
border-top: none;
width: 100px;
height: 100px;
color: red;
box-shadow: -1px -1px currentcolor,
1px 1px currentcolor,
inset -1px 1px currentcolor,
inset 1px -1px currentcolor;
display: block;
background-color: #fd999952;
background-clip: padding-box;
font-weight: bolder;
outline: none;
}<button type="button" class="btn">Register</button>