我想通过使用CSS达到以下结果:
因此,基本上,我希望圆位于按钮背景的顶部,但位于其边框的后面,并且按钮位于背景的顶部
使用以下代码,我可以绘制一个类似的按钮:
.container {
margin-top: 30px;
}
button {
font-size: 20px;
border: 2px solid black;
padding: 8px 20px;
position: relative;
}
.container .circle {
position: absolute;
top: -21px;
right: -21px;
width: 40px;
height: 40px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: #4da6ff;
}
<div class="container">
<button>Test Button
<span class="circle"></span>
</button>
</div>
结果:
这里的问题是圆圈在按钮的顶部,但也在其边框的顶部。