border-radius熟悉写形状攻略

最新推荐文章于 2021-06-19 10:17:59 发布

weixin_33775582

最新推荐文章于 2021-06-19 10:17:59 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b73ee696fb9a009d22fc774

本文介绍了CSS3中的border-radius属性，不仅可用于创建圆角效果，还能绘制多种图形。通过定义不同大小和顺序的圆角，可以创造出从简单到复杂的图案。结合边框大小、渐变颜色和阴影等特性，能进一步提升视觉效果。

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

border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。

把这些基本的图形进行组合，还可以描绘成不同的图案，真的很棒。以下只是简单的几个举例，更多的图形，自己动手画吧。仅border-radius就能实现这么丰富的图案，如果再加上边框大小、渐变颜色和阴影等，将会添加更多的质感。

语法和解释

border-radius可以通过值来定义样式相同的角，也对每个角分别定义。下面的表格解释了各个写法所表示的效果。

对于每个角的两个值，分别代表的是该角的水平方向和垂直方向的半径。若有四个值，上面表格有解释。看下面这个图，或许会清晰些。

边框大小和外半径、内半径的关系

实际的内半径相当于外半径减去相应的边框大小。相减的值中如果至少一个为为负值或零，则内半径为直角。
不管怎样，相邻的两个边都会形成流畅的线条。