实现0.5px的圆角边框按钮
作者:
景阳冈大虫在此 | 来源:发表于
2020-06-23 17:03 被阅读0次

效果
<template>
<!-- 边框和文字是有颜色的圆角按钮 -->
<button v-on="$listeners" class="blankButton">
<slot />
</button>
</template>
<style lang="scss" scoped>
.blankButton {
$color: #437cee;
background: #fff;
padding: 0 12px;
height: 26px;
color: $color;
font-size: 14px;
line-height: 16px;
font-family: fzlt;
text-align: center;
&:after {
content: ' ';
border: 1px solid $color;
border-radius: 26px;
transform: scale(0.5);
position: absolute;
top: -50%;
right: -50%;
left: -50%;
bottom: -50%;
}
}
</style>
本文标题:实现0.5px的圆角边框按钮
本文链接:https://www.haomeiwen.com/subject/oivhfktx.html
网友评论