为什么应用半径时边框很时髦？答案

【问题标题】：Why is the border funky when a radius is applied?为什么应用半径时边框很时髦？
【发布时间】：2021-06-16 14:52:19
【问题描述】：

当我看到这个小错误时，我正在乱搞 HTML

我使用 SCSS 制作了这个按钮，并将其边框半径设置为 5px。如果你能注意到，边界 raidus 应该在的地方有一条小曲线。

特写：

为什么会这样？

代码

/* Button.scss file */

@import "../../util/variables";

button {
    background-color: white;
    color: black;
    outline: none;
    border: 1px currentColor solid;
    padding: 0.3rem 0.85rem;
    border-radius: $border-radius;

    &:hover {
        cursor: pointer;
    }

    &.primary {
        background-color: $primary;
        color: $primary-text;
    }

    &.secondary {
        background-color: $secondary;
        color: $secondary-text;
    }

    &.block {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

<!-- HTML -->

<button
    class="button"
>
    Login
</button>

编辑：

$primary 是 #283593
我用的是火狐

button {
     background-color: white;
     color: black;
     outline: none;
     border: 1px currentColor solid;
     padding: 0.3rem 0.85rem;
     border-radius: 5px;
}
 button:hover {
     cursor: pointer;
}
 button.primary {
     background-color: #283593;
     color: white;
}
 button.block {
     display: block;
     width: 100%;
     margin-bottom: 0.5rem;
}

&lt;button class="button primary"&gt;Login&lt;/button&gt;

【问题讨论】：

这可能取决于渲染引擎。你用什么浏览器？
Firefox 浏览器，我正在使用带有 SASS 的 svelte 框架
我给你做了一个sn-p。应用变量后是否正确？
相关：stackoverflow.com/q/66288711/8620333
在 Brave Browser v1.21.77 中看起来非常漂亮

标签： html css sass frontend

【解决方案1】：

这是由于渲染中使用的小数不精确而造成的伪影。您可以预期它会因浏览器而异，甚至可能因 GPU 和渲染模式而异。

另请参阅：Is floating point math broken?

【讨论】：