【快应用】按钮的圆角样式不生效

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

现象描述

在div里包含两个input，分别定义“取消”和“确定”两个按钮，但是“取消”按钮的圆角样式不生效。

【快应用】按钮的圆角样式不生效_圆角

问题分析

分析如下两个按钮样式定义的代码，定义两个按钮公共样式的代码：

.button-div input {

width: 148px;

height: 48px;

border-radius: 18px;

font-size: 30px;

flex: 1;

margin: 10px;

}

【快应用】按钮的圆角样式不生效_背景色_02

分别定义按钮样式的代码：

.btn_cancel {

color: #007D00;

background-color: #FFFFFF;

}

.btn_agree {

background-color: #007DFF;

color: #FFFFFF;

}

【快应用】按钮的圆角样式不生效_问题分析_03

发现“取消”按钮的背景色设置了白色，因和白底同色导致圆角效果无法体现（如果不设置背景色，效果和设置白色是一样的）。

解决方法

可以有两种方案解决：

【方案一】给“取消”按钮更换一个背景色。

【方案二】基于现有白色背景，设置一个边框，示例代码如下：

.btn_cancel {

color: #007D00;

background-color: #ffffff;

border: 1px solid #000000; //设置边框

}

【快应用】按钮的圆角样式不生效_圆角_04

加上边框后的效果：

【快应用】按钮的圆角样式不生效_背景色_05

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

返回列表