登录 注册

CSS 视觉 - 圆

本贴最后更新于 1954 天前，其中的信息可能已经时移世异

2019-07-19

描述

使用纯 CSS 创建一个圆形。

HTML

<div class="circle"></div>

CSS

.circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}

Demo

说明

  1. border-radius: 50% 弯曲一个元素的边来创造一个圆形
  2. 由于一个圆从中心到边上的任意一点都有着相同长度的半径，因此他的 width 和 height 必须相等。否则的话将会创造出一个椭圆

浏览器支持

支持率：97.7%
支持情况：https://caniuse.com/#feat=border-radius

返回总目录

每天 30 秒系列之 CSS

  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖 • 9 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖 • 3 关注
1 引用
每天 30 秒系列之 CSS • Vanessa
昆明 位置
3 关注
1 引用
20 回帖
6
4
4
4
4.8k 124 385 858 991 442 6 878 1.1k

相关帖子

20 回帖
CSS 视觉 - 圆

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • csfwff • • 1
    捐赠者

    🤣🤣🤣 我一般都是 border-radius 写的贼大

    1 回复
  • InkDP •
    捐赠者

    越大越丑

    1 回复
  • csfwff • • 1
    捐赠者

    doge 一样的啊 大到一定程度就全是圆的了

    1 回复
  • InkDP •
    捐赠者

    我说的不圆的时候的情况

    1 回复
  • csfwff • • 1
    捐赠者

    😒😒😒 现在不是在讨论圆的么

    1 回复
  • InkDP •
    捐赠者

    讨论的不是 border-radius 吗

    1 回复
  • csfwff • • 1
    捐赠者

    😒 讨论圆啊……只不过是用 border-radius 实现

  • Vanessa •
    订阅者 付费者 作者

    @csfwff @jinjianh 请查看该页面有几个元素使用了 border-radius 你觉的那个使用的最好看

  • InkDP •
    捐赠者

    header：头像 搜索框
    content:代码处，还有就是折叠呀，头像这里

    最好看的就是头像这里，感觉全是 5px 感觉小的 3 4px 就够了

    1 回复
  • someone756 •

    https://caniuse.com/#feat=border-radius

    这个网站不错呐.

  • Vanessa •
    订阅者 付费者 作者

    右上角的头像是 3px， 你说的是哪一个头像好看？哪一个要 3、4 px？

    还有一个 18px 的哦

  • Eddie •
    捐赠者

    我认不出你的新头像

    1 回复
  • Vanessa •
    订阅者 付费者 作者

    等你熟悉了我的新头像，我再换一个。哇哈哈

  • Blackman99 •
    捐赠者

    svg 的方式也可以实现

    1 回复
  • Vanessa •
    订阅者 付费者 作者

    svg 里面放元素不好放吧

    1 回复
  • Blackman99 •
    捐赠者

    类似这样，不用 circle 用 path 也行

    <svg>
  <circle>
  </circle>
</svg>
    1 回复
  • Vanessa •
    订阅者 付费者 作者

    我的意思是里面要放个头像之类的不好弄吧

    1 回复
  • Blackman99 • • 2 • 2 评论
    捐赠者

    只是画圆感觉很方便，需要在其中放图片的话，就要多写几句了

    1 回复
    这么多 还是 border-radius 方便一点
    InkDP •
    单单只是画圆比 border-radius 要方便的，加图片 svg 就稍显麻烦
    Blackman99 •
  • Vanessa •
    订阅者 付费者 作者

    还可以这么弄，高级。学习了。

    1 回复
  • Blackman99 • • 1 评论
    捐赠者

    放图片这么写还是太麻烦，就是为了秀个技巧trollface

    陈独秀
    Vanessa •
请输入回帖内容 ...
Vanessa
我们终此一生，就是要摆脱他人的期待，找到真正的自己。 昆明
回帖
8930
 帖子
756
 积分
140708