Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

CSS 视觉 - 圆

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

20 评论
csfwff • 2019-07-19
回复 删除

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

jinjianh • 2019-07-19
回复 删除

越大越丑

csfwff • 2019-07-19
回复 删除

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

jinjianh • 2019-07-19
回复 删除

我说的不圆的时候的情况

csfwff • 2019-07-19
回复 删除

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

jinjianh • 2019-07-19
回复 删除

讨论的不是border-radius

csfwff • 2019-07-19
回复 删除

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

Vanessa • 2019-07-19
回复 删除

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

jinjianh • 2019-07-19
回复 删除

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

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

jingxuetao • 2019-07-19
回复 删除
Vanessa • 2019-07-19
回复 删除

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

Eddie • 2019-07-19
回复 删除

我认不出你的新头像

Vanessa • 2019-07-19
回复 删除

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

Blackman99 • 2019-07-20
回复 删除

svg 的方式也可以实现

Vanessa • 2019-07-20
回复 删除

svg 里面放元素不好放吧