自定义CSS按钮点击时出现圆角与底部白线异常如何解决？

问题修复方案 #

导致样式异常的核心原因有2个：

1. border-radius: none 是无效赋值，border-radius仅支持长度/百分比值，错误赋值会导致浏览器调用按钮内置默认圆角，触发点击状态下的圆角变化
2. 引入的Bootstrap 4内置了<button>标签的active状态样式规则，你仅定义了border-color，没有覆盖完整的边框、背景属性，点击时触发Bootstrap默认样式就会出现底部白线

按以下修改CSS即可实现需求：

.boton{ 
    font-weight: bold;
    margin: 20px;
    padding: 5px;
    background-color: white;
    /* 完整定义边框属性，覆盖Bootstrap默认样式 */
    border: 2px solid black;
    color:black;
    cursor: pointer;
    /* 用0而非none定义无圆角 */
    border-radius: 0;
    box-shadow: 5px 6px rgb(0, 0, 0);
    outline: none;
}

.boton:hover {
    color:black;
    transform: translateY(1px);
}

.boton:active {
    outline: none;
    color:black;
    transform: translateY(6px);
    box-shadow: none;
    /* 覆盖Bootstrap active状态下的背景、边框默认规则 */
    background-color: white;
    border: 2px solid black;
    border-radius: 0;
}

修改后按钮按下时只会按逻辑下移、隐藏阴影，不会出现圆角变化和底部白线问题。

内容的提问来源于stack exchange，提问作者Fran Diaz