个人中心
gpt4 book ai didi

html - Firefox border-radius 呈现奇怪的宽效果

转载 作者：行者123 更新时间：2023-11-28 10:34:34 25 4
gpt4 key购买 nike

我在 firefox 中使用 border-radius 时有一些奇怪的副作用。打开以下 html 会在某些按钮边框上呈现一些三 Angular 形。在这里查看副作用:http://i.imgur.com/GyqiEL8.png (我没有足够的图像声誉)

代码是

<html>
    <head>
    </head>
    <body>
        <form>
            <input style="border-radius: 10px;" value="Continue" type="submit">
        </form>
    </body>
</html>

有人有什么想法吗？我正在使用 FF 28.0谢谢

最佳答案

这适用于所有浏览器:

CSS

.myButton {
    width: 180px;
    height: 48px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: rgba(0,0,0,1);
    font: normal 11px/48px "Lucida Grande";
    border: 1px solid rgba(128,128,128,1);
    -webkit-border-radius: 67px;
    -moz-border-radius: 67px;
    border-radius: 67px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    background-image: -moz-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    background-image: -o-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    background-image: -ms-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    background-image: linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}

HTML

<button type="button" class="myButton">Button</button>

关于html - Firefox border-radius 呈现奇怪的宽效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23385827/

25 4 0
文章推荐： javascript - 在 JavaScript 中切换标签元素
文章推荐： ios - 如何将文件存储在使用 “documentDirectory” swift 创建的文件夹中
文章推荐： php - dompdf:A4 页面上的白边
文章推荐： javascript - 使用弹出栏的 Chrome 扩展