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

栏目: CSS · 发布时间: 5年前

内容简介:给任何正方形元素设置一个足够大的border-radius,就可以把它变成一个圆形不过,在实际开发中往往不会一个元素指定固定的宽度和高度,而是希望它能根据其内容自动调整并适应,而内容的长短不可能在事先就知道。即 使是在设计一个静态网站的时候(元素的内容可以预先确定) 通常期望达到如下效果:如果它的宽高相等,就显示为一个圆;如果宽 高不等,就显示为一个椭圆。border-radius有一个鲜为人知的设置:

给任何正方形元素设置一个足够大的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的值。

半椭圆

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

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

可以观察到:这个形状是垂直对称的,左上角和右上角的半径值应该是相同的;左下角和右下角的半径值也应该是相同的;整个顶边都是曲线,左上角和右上角的半径之和应该等于整个形状的宽度,因此可以推断出,左半径和右半径在水平方向上的值应该均为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;
}
复制代码
每日一个css效果之自适应椭圆

四分之一椭圆

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS3实用指南

CSS3实用指南

吉伦瓦特 / 屈超、周志超 / 人民邮电出版社 / 2012-3 / 49.00元

CSS3为Web的视觉样式语言注入了强大的新功能,让设计人员更加轻松自如地设计优美而引人入胜的内容。借助CSS3,不使用图片就可以创建半透明背 景、渐变、阴影等夺人眼球的视觉效果;还可以使用漂亮、独特、非Web安全的字体显示文本;不用Flash就可以创建动画;不用JavaScript就可 以定制适应用户的设备和屏幕尺寸的设计。 本书通过一系列实用且新颖的范例,向读者展示如何实现以上功能和更多......一起来看看 《CSS3实用指南》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具