现象描述：
input 组件type 为button 时，设置了圆角border-radius 属性后，点击该组件时没有点击效果了（背景色没有变化），删除该属性就是有点击效果的。
代码如下：
<template>
<div class="page-wrapper">
<input type="button" class="button" value="Animation 动画" />
</div>
</template>
<script>
</script>
<style>
.page-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.button {
color: #20a0ff;
background-color: red;
padding: 10px 20px;
border-radius: 40px;
}
</style>
问题分析：
设置圆角属性后，引擎底层受限导致不能自动实现点击效果，需要自己去实现。
解决方法：
设置了圆角属性后要实现按钮点击效果可以通过快应用的伪类实现。
修改后代码如下（见红色部分）：
<template>
<div class="page-wrapper">
<input type="button" class="button" value="Animation 动画" />
</div>
</template>
<script>
</script>
<style>
.page-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.button {
color: #20a0ff;
background-color: red;
padding: 10px 20px;
border-radius: 40px;
}
.button:active{
background-color: green;
}
</style>
欲了解更多详情，请参见：
快应用伪类：
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69970551/viewspace-2785354/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
