相关疑难解决方法(0)

边界半径百分比(%)和像素(px)或em

如果我对border-radius 使用像素或em值,则边缘半径始终为圆弧或药丸形状,即使该值大于元素的最大边.

当我使用百分比时,边缘半径是椭圆形的,从元素每边的中间开始,形成椭圆形或椭圆形:

像素(px)边界半径百分比(%)border-radius

border-radius的像素值:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

Run Code Online (Sandbox Code Playgroud)

<div>border-radius:999px;</div>

Run Code Online (Sandbox Code Playgroud)

border-radius的百分比值:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

Run Code Online (Sandbox Code Playgroud)