鍍金池/ 問(wèn)答/HTML/ css border-radius 怎么保持水平半徑等于垂直半徑

css border-radius 怎么保持水平半徑等于垂直半徑

現(xiàn)在有一個(gè)矩形框,高度小于寬度

   .half {
      border: 10px solid black;
      height: 200px;
      width: 400px;
      margin-left: 900px;
      border-radius: 55px;
      background: yellow;
    }

圖片描述

現(xiàn)在設(shè)置的是固定高度,垂直半徑和水平半徑都是55px,可以得到我要的效果,垂直方向上有一段110px長(zhǎng)度的固定高度不參與倒圓角
但是現(xiàn)在這個(gè)矩形高度變?yōu)榭勺兓?而border-radius支持百分?jǐn)?shù),但是百分?jǐn)?shù)相對(duì)的是邊框的長(zhǎng)度,水平半徑相對(duì)的是水平邊框的長(zhǎng)度,垂直半徑相對(duì)的是垂直邊框的長(zhǎng)度,使用calc(50% - 55px)，這樣水平半徑是不等于垂直半徑的
現(xiàn)在的做法是使用js設(shè)置，能不能通過(guò)css也可以實(shí)現(xiàn)這個(gè)效果

回答
編輯回答
涼心人

border-radius: 50%;

2018年3月16日 03:02
編輯回答
凝雅

在使用 border-radius 定義圓角時(shí)，如果圓角為正圓弧，則只需指定一組值；如果圓角為橢圓弧，就要指定兩組值，其中第1組的值針對(duì)長(zhǎng)軸（即盒子水平方向的軸），第2組的值針對(duì)短軸（即盒子垂直方向的軸）。

通過(guò)把短軸設(shè)置得小一些，可以使垂直方向的弧度變小。

.half {
  border: 10px solid black;
  height: 200px;
  width: 400px;
  border-radius: 25% / 10%;
  background: yellow;
}

圖片描述

參考：
codepen 上的圓角生成器
https://codepen.io/pmk/full/z...

2017年9月24日 17:26