每日一个css效果之自适应椭圆

给任何正方形元素设置一个足够大的border-radius，就可以把它变成一个圆形

.circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}
复制代码

不过，在实际开发中往往不会一个元素指定固定的宽度和高度，而是希望它能根据其内容自动调整并适应，而内容的长短不可能在事先就知道。即 使是在设计一个静态网站的时候（元素的内容可以预先确定） 通常期望达到如下效果：如果它的宽高相等，就显示为一个圆；如果宽 高不等，就显示为一个椭圆。

如何将不定宽高的元素变成椭圆

border-radius有一个鲜为人知的设置： 它可以单独指定水平 和垂直半径，只要用一个斜杠（/）分隔这两个值即可 。有一个尺寸为 200px×150px 的元素，就可以把它圆角的两个半径值分别指定为元素宽高的 一半，从而得到一个精确的椭圆：

.circle {
    border-radius: 100px / 75px;
}
复制代码

但是，这段代码存在一个很大的缺陷：只要元素的尺寸发生变化border-radius的值就得跟着改。解决的方法便是将border-radius指定为百分比。

这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度 用于垂直半径的解析。这意味着相同的百分比可能会计算出不同的水平和垂 直半径。因此，如果要创建一个自适应的椭圆，可以把这两个半径值都 设置为 50%，可以简化为：

将任意元素变成自适应椭圆的方法

.circle {
    border-radius: 50%;
}
复制代码

以下示例代码通用的样式

.bgc-darkorange {
      background: darkorange
    }
    .bgc-blue {
      background: #39f;
    }
    .bgc-yg {
      background-color: yellowgreen;
    }
    .bgc-gray {
      background: #666;
    }
    .display-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .display-wrapper {
      width: 300px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
    }
    .display-item {
      width: 200px;
      display: inline-block;
    }
    .inline-block {
      display: inline-block;
    }
复制代码

<div class='display-wrapper bgc-yg'>
  <h4 class='color-white'>自适应椭圆</h4>
  <span class='display-item circle bgc-blue'>
    Suspendisse et arcu felis, ac gravida turpis. 
    Suspendisse potenti. Ut porta rhoncus ligula,
    sed fringilla felis feugiat eget.
  </span>
</div>
复制代码

自适应椭圆的效果完成了，既然可以生成自适应椭圆，那么可以生成半椭圆吗？

border-radius的非常灵活。border-radius是一个简写属性。可以为元素的每个角指定不同的值

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

更简洁的方法还是使用border-radius这个简写属性，可以向它一次性提供用空格分开的多个值。如果传给它四个值，这四个值就会被分别从左上角开始以顺时针顺序应用到元素的各个拐角。如果提供的值少于四个，则它们会以CSS的常规方式重复，类似于padding或margin的值。

半椭圆

假设我们想要实现上面的半椭圆，该如何做呢？

可以观察到：这个形状是垂直对称的，左上角和右上角的半径值应该是相同的；左下角和右下角的半径值也应该是相同的;整个顶边都是曲线，左上角和右上角的半径之和应该等于整个形状的宽度,因此可以推断出，左半径和右半径在水平方向上的值应该均为50%。再看看垂直方向，顶部的两个圆角占据了整个元素的高度，而且底部完全没有任何圆角，因此在垂直方向上border-radius的值应为100% 100% 0 0。 因为底部两个角的垂直圆角是零，那么它们的水平圆角是多少就完 全不重要了，因为此时水平圆角总是会被计算为零。

.semicircle-y {
  border-radius: 50% / 100% 100% 0 0;
}
复制代码

<div class='display-wrapper bgc-yg'>
  <h4 class='color-white'>自适应半椭圆</h4>
  <span class='display-item semicircle bgc-blue'>
    Suspendisse et arcu felis, ac gravida turpis. 
    Suspendisse potenti. Ut porta rhoncus ligula,
    sed fringilla felis feugiat eget.
  </span>
</div>
复制代码

基于如上原理我们可以很快得出一个x方向的半椭圆

.semicircle-y {
  border-radius: 50% / 100% 100% 0 0;
}
复制代码

四分之一椭圆

<!-- 左上角 -->
border-radius: 100% 0 0 0;
<!-- 右上角 -->
border-radius: 0 100% 0 0;
<!-- 右下角 -->
border-radius: 0 0 100% 0;
<!-- 左下角 -->
border-radius: 0 0 0 100%;
复制代码