CSS深度挖掘 - 「Border-radius」的八个值

最新推荐文章于 2025-07-30 11:05:48 发布

原创最新推荐文章于 2025-07-30 11:05:48 发布 · 8.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #前端

前端开发专栏收录该内容

2 篇文章

订阅专栏

这篇博客详细探讨了CSS中的border-radius属性，从基本的圆角设置到如何利用八个值实现圆、圆环、半圆、小房子等创意图形。通过实例展示了设置不同值对元素形状的影响，并揭示了简写形式的规则。最后鼓励读者进一步利用该属性创造更多美观的图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识往往随时间淡忘，沉心在开发中时间长了，发现好些知识已经又模糊了，一些很好用的属性，其本身就有，却忘了，然后绕个大圈子自己实现了一套，究其原因，还是因为一开始没有掌握牢固和透彻

# 都知道是圆角

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。他用于向 block 级别元素增加圆角

语法

border-radius: 1-4 length|% / 1-4 length|%;

按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

# 实现一个圆

在不使用 canvas 和 svg 的情况下，用 border-radius 就能简单实现一个圆

<div>
   <p></p>
</div>

div {
  width: 100px;
  height: 100px;
}

p {
  width: 100%;
  height: 100%;
  background: lightgreen;
  border-radius: 50&;
}

为什么定义一层 ‘多余’ 的 <div> ? 居然说我多余，不解释，自己理解去。╭(╯^╰)╮

# 实现一个圆环

给圆加一个边框，然后不绘制圆的背景颜色就好了？是的，就是这样

p {
  width: 100%;
  height: 100%;
  border: solid 3px lightgreen;
  border-radius: 50%;
}

什么？你觉得这样宽度超出了原本的宽度？你怎么辣么多问题呢！我想婧婧

box-sizing: border-box;   // 规定元素的宽高包含了元素边框的大小

将上述样式加入到p的样式中，唉，瘦了一圈，好神奇

给p元素增加box-sizing属性

# 实现一个半圆

砍掉一半就好了，不过这时候就不能用 border-radius 的简写形式了

p {
  width: 100%;
  height: 50%;
  background-color: lightgreen;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

# 实现一个小房子？

上方一个半圆，下方一个“半方”

p {
  width: 100%;
  height: 100%;
  border: solid 6px lightgreen;
  box-sizing: border-box;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

好吧，他更像一个窗户

# 认真点好吧，说好的八个值呢？

如果我们想写一个能直接调用的具有自适应功能的半圆，假如我们直接改成百分比，如下

p {
  width: 100%;
  height: 50%;
  background: lightgreen;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

这是什么东西，感觉和上面那个房子好像啊，难道是设置50%不行？试试100%？

  border-top-left-radius: 100%;
  border-top-right-radius: 100%;

我去，怎么还是和上面的一样？先设置一个试试？

 border-top-left-radius: 100%;
/*   border-top-right-radius: 100%; */

这是什么鬼，等等，想想，设置了border-top-left-radius: 100%; 也就是说，圆角按边长的100%来设置，长和宽不一样的情况下，圆角的两侧依然严格按边长来设置，难道可以写两个值？如果我这么写呢？

border-top-left-radius: 50% 100%;
/*   border-top-right-radius: 100%; */

咦，居然不报错，真的可以这么写啊！可是谁先谁后呢？左边和上边谁的优先级高呢？唉，border的定义顺序有奥秘，居然是先 top 再 left，对的，果然是先上边再左边。依照这个规律，增加上右角效果呢？

border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;

半圆实现了！那如果我想简写呢？这样？

border-radius: 50% 100% 0 0;

我去，怎么又坏了，怎么办怎么办！唉，不对，我这么写的话相当于是：

border-top-left-radius: 50%;
border-top-right-radius: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

这明显不对啊，难道简写的时候一条边只能设置一个值？感觉不科学啊！

再看看定义？中间那个斜杠是什么鬼，难道！！！

border-radius: 50% 50% 0 0 / 100% 100% 0 0;

哇哦，实现了。祝大家大吉大利新年快乐新婚快乐吉祥如意撒花～

# 拓展

IE 的标签页卡片

p {
  width: 100%;
  height: 50%;
  background: lightgreen;
  border-radius: 25% 25% 0 0 / 50% 50% 0 0;
}

google 的标签页卡片
对不起，实现不了，为什么？你咋又辣么多问题呢！
因为border-radius是实现圆角的属性，无法实现梯形绝对角度效果，这里补充一下怎么实现梯形

p {
  height: 0;
  width: 100px;
  border-bottom: 50px solid lightgreen;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent; 
}

对角圆角

p {
  width: 100%;
  height: 50%;
  background: lightgreen;
  border-radius: 100% 50%/ 0 100%;
}

一片叶子

p {
  width: 100%;
  height: 50%;
  background: lightgreen;
  border-radius: 0 100% / 0 100%;
}

# 后语

利用border-radius的八个值进行调节，还能得到很多的漂亮的图形，如果有兴趣，欢迎交流一起进步。另外，我的下一篇文章【利用简单的css实现各种漂亮的形状】，如果觉得我的写作对您有帮助，欢迎关注哦。