相关疑难解决方法(0)

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

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

border-radius的像素值:

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

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

border-radius的百分比值:

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

<div>border-radius:50%;</div>

为什么边界半径百分比的作用方式与使用像素值或em值设置的border-radius的作用方式相同？

我正在尝试在椭圆和半圆之间创建混合.

半圆可以在CSS中创建:

.halfCircle{
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     -moz-border-radius: 90px 90px 0 0;
     -webkit-border-radius: 90px 90px 0 0;
     background:green;
}

椭圆形可以像这样制作:

.oval { 
    background-color: #80C5A0;
    width: 400px;
    height: 200px;
    margin: 100px auto 0px;
    border-radius: 200px / 100px;
}

但我怎样才能做出半椭圆形呢？到目前为止,这是我的尝试.发生的问题是我有平顶,在这里找到.谢谢!