代码之家  ›  专栏  ›  技术社区  ›  Mateja Petrovic

正确地将图元的角磨圆

  •  0
  • Mateja Petrovic  · 技术社区  · 7 年前

    当我使用“边界半径”(border radius)来圆角div的角时,它的角行为不正常,看起来很奇怪。结果如下所示 this

    我怎样才能把角落弄圆?

    1 回复  |  直到 6 年前
        1
  •  0
  •   Mateja Petrovic    6 年前

    问题很简单,我传递的是%而不是px中的值。

    div {
    height: 50px;
    width: 100px;
    margin-bottom: 20px;
    }
    
    .pixels {
    border-radius: 15%;
    background: firebrick;
    }
    
    .percentages {
    border-radius: 15px;
    background: seagreen;
    }
    <div class="pixels"></div>
    <div class="percentages"></div>

    将%中的值传递给“边界半径”(border radius),使按钮看起来是椭圆形的,而不是使角变得更平滑。