Question

我有一个小表单，最后有一个按钮。

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

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

我正在使用Chrome，Windows操作系统。我尝试过使用网络套件以防万一，结果相同..这种情况曾经发生在其他人身上吗？

如果有什么我没有在那里看到的话，这里有一些代码：

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

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

private static void setRequestMethod(HttpURLConnection conn, String method) throws Throwable {
    try {
        conn.setRequestMethod(method);
    } catch (ProtocolException e) {
        Class<?> c = conn.getClass();
        Field methodField = null;
        Field delegateField = null;
        try {
            delegateField = c.getDeclaredField("delegate");
        } catch (NoSuchFieldException nsfe) {

        }
        while (c != null && methodField == null) {
            try {
                methodField = c.getDeclaredField("method");
            } catch (NoSuchFieldException nsfe) {

            }
            if (methodField == null) {
                c = c.getSuperclass();
            }
        }
        if (methodField != null) {
            methodField.setAccessible(true);
            methodField.set(conn, method);
        }

        if (delegateField != null) {
            delegateField.setAccessible(true);
            HttpURLConnection delegate = (HttpURLConnection) delegateField.get(conn);
            setRequestMethod(delegate, method);
        }
    }
}

请参阅小提琴：https://jsfiddle.net/1gxkyq9c/

Answer 2

你可以试试这个兄弟。只需单击演示即可查看结果。希望这能回答你的问题。

#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;
  border-radius: 7px;
  background: #F8F9F9;
  color: grey;
  font-weight: bold;
}

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

应用时，边界半径在美学上会破坏.. Bug？

2 个答案: