如何仅在 link 的末尾弯曲 link 的边框
How to bend the border of a link only at the end of the link
我在 Adobe XD 中做了这个设计:[![按钮设计][1]][1]
我试着用边框半径让它看起来像这样,但角落表现得很奇怪。
这就是我使用 CSS 时的样子:[![Button CSS][2]][2]
我用 link 而不是按钮顺便说一句!
这是我的 CSS:
.overlay a {
margin-left: 20px;
text-decoration: none;
color: #e4e0e0;
border: 3px solid #f354f3;
background-color: #595959;
color: #f354f3;
padding: 5px 100px;
border-radius: 20%;
}
如果我使边框半径超过 20%,则整个边框开始弯曲。我只想让边框的末端像设计中那样弯曲!
希望有人能帮助我。谢谢!
[1]: https://i.stack.imgur.com/zLLl1.jpg
[2]: https://i.stack.imgur.com/hcPdH.jpg
百分比边框半径取决于 height/width(从左到上高度的 20%;从上到左宽度的 20%)。
您可以使用非百分比值(如 rem
或 px
)
.something {
border: 3px solid #f354f3;
padding: 1rem 2rem;
border-radius: 1rem;
}
<div class="something">some text in my element</div>
如果您想要完整的边界半径(圆形),您可以将该值设置得非常高。类似于:
.something {
border: 3px solid #f354f3;
padding: 1rem 2rem;
border-radius: 9999px;
}
<div class="something">some text in my element</div>
我在 Adobe XD 中做了这个设计:[![按钮设计][1]][1]
我试着用边框半径让它看起来像这样,但角落表现得很奇怪。
这就是我使用 CSS 时的样子:[![Button CSS][2]][2]
我用 link 而不是按钮顺便说一句!
这是我的 CSS:
.overlay a {
margin-left: 20px;
text-decoration: none;
color: #e4e0e0;
border: 3px solid #f354f3;
background-color: #595959;
color: #f354f3;
padding: 5px 100px;
border-radius: 20%;
}
如果我使边框半径超过 20%,则整个边框开始弯曲。我只想让边框的末端像设计中那样弯曲!
希望有人能帮助我。谢谢! [1]: https://i.stack.imgur.com/zLLl1.jpg [2]: https://i.stack.imgur.com/hcPdH.jpg
百分比边框半径取决于 height/width(从左到上高度的 20%;从上到左宽度的 20%)。
您可以使用非百分比值(如 rem
或 px
)
.something {
border: 3px solid #f354f3;
padding: 1rem 2rem;
border-radius: 1rem;
}
<div class="something">some text in my element</div>
如果您想要完整的边界半径(圆形),您可以将该值设置得非常高。类似于:
.something {
border: 3px solid #f354f3;
padding: 1rem 2rem;
border-radius: 9999px;
}
<div class="something">some text in my element</div>