Question

有人可以解释为什么椭圆形在侧面变薄而不是一致的1px边界吗？

我的代码：

＆＃13;

    button {
        font-size: 1em;
        background: #fff;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border: 1px solid #1588cb;
        color: #1588cb;
        font-weight: 400;
        height: 60px;
        width: 300px;
        position: relative;
        margin: 25px 0 50px 0;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -o-box-sizing: content-box;
        box-sizing: content-box;
    }

    .full-circle {
        display:block;
        border-bottom: 1px solid #1588cb;
        width: 45px;/*
        -moz-border-radius: 45px / 36px;
        -webkit-border-radius: 45px / 36px;*/
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -o-box-sizing: content-box;
        box-sizing: content-box;
        border-radius: 45px / 38px;
        height: 41px;
        background: #fff;
        position: absolute;
        left: 50%;
        margin-left: -17px;
        bottom: -17px;
        line-height: 50px;
    }

＆＃13;

    <button>News<span class="full-circle">+</span></button>

＆＃13;

Answer 1

因为您只指定了bottom-border。浏览器正在处理从1px到0px的转换，从而产生渐变边缘。如果你定义

border: 1px solid transparent;

同样，你会看到边缘现在是实心的（https://jsfiddle.net/p9hynbrb/4/）

然而，由于底部边框不再正确对齐（border-left and border-right are intersecting，如此处所示更清晰），因此会失去所需的效果。

您可以做的一个解决方法（如果保持形状很重要）是在跨度周围应用1px边框，然后在要隐藏的边框上应用蒙版。

像这样：https://jsfiddle.net/p9hynbrb/1/

或者：https://jsfiddle.net/p9hynbrb/5/

不幸的是，两者都需要标记更改（要么将“+”推到面具上方 - 第一个小提琴，要么将“+”移动到生成的内容中 - 第二个......）

为什么要削减CSS椭圆形状的边框？

1 个答案: