html - Border-radius 在应用时会在美学上中断.. Bug？

Question

我有一个小表单，末尾有一个按钮。

没有 border-radius 它看起来像这样 --> https://s29.postimg.org/3yw0js3qf/screenshot--2017-04-02-20-18-33.png

当我应用 border-radius 时，它看起来像这样 --> https://s11.postimg.org/t25tmdsf7/screenshot--2017-04-02-20-19-12.png

我正在使用 Chrome、Windows 操作系统。我试过使用 web-kit 以防万一，结果相同。其他人有没有遇到过这种情况？

下面是这段代码，以防我在那里没有看到任何东西:

HTML
<div id="boton">
    <button type="button" class="texto">INGRESAR</button>
</div>

CSS
#boton{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin: auto;
margin-top: 2%;
}

#boton>button{
width: 20%;
padding: 10px;
}

谢谢!

Answer 1

您需要使用边框和背景渐变复制默认样式:

border-radius: 4px;
border: 1px solid #AFAFAF;
background: linear-gradient(#E3E3E3, #F7F7F7);

参见 fiddle :https://jsfiddle.net/1gxkyq9c/