CSS 速成：边框半径

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

什么是 CSS Quickes？

我开始在 Instagram 上向我亲爱的社群提问：“哪些 CSS 属性让你们感到困惑？”

在“CSS速成”系列中，我将深入讲解一个CSS属性。这些都是社区要求讲解的属性。如果你对某个CSS属性也有疑问，欢迎在Instagram、Twitter或下方评论区留言。我会解答所有问题。

我会在twitch.tv上直播编程。如果你想直接和我交流，欢迎来这里！

基础知识

我们来谈谈边框半径。

简而言之：你可以给 HTML 元素添加圆角，但只有当背景颜色与 HTML 元素颜色不同，或者 HTML 元素有边框颜色时，才能看到圆角效果。

最基本的语法是：

.radius {
  border-radius: 10px;
}

现在是时候了解半径的含义了。
想象一个圆。每个圆都有一个半径。半径是指从圆心到圆周上任意一点的距离。

现在你知道什么是半径了。想象一下，你沿着HTML元素圆的边缘剪掉一个角！就是这样！就像有人用剪刀沿着圆的边缘剪一样。

深入探讨

它有多种不同的使用方法。

.border{
    /* top-left-and-bottom-right | top-right-and-bottom-left */
    border-radius: 10px 10px;

    /* top-left | top-right-and-bottom-left | bottom-right */
    border-radius: 10px 10px 10px;

    /* top-left | top-right | bottom-right | bottom-left */
    border-radius: 10px 10px 10px 10px;
}

您可以看到，我们可以设置每一个角落，从而赋予我们创建精美网站的良好灵活性。

支持的值

您可以使用px、em和%值。

第二半径

还有一种更高级的用法，border-radius就是可以定义第二个半径。想象一下，现在每个角都有两个圆了！而且你可以把它们设置成独立的。

.radius{
    border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
    /* you can read this like this: */
    border-radius: 
       top-left-up top-right-up bottom-right-down bottom left-down /
       top-left-left top-right-right bottom-right-right bottom-left-left
}

以下是一些例子：

创建圆形元素

border-radius 也用于创建圆形元素。

就是这样！没什么需要学习的了border-radius。
这很简单；你只需要一个元素，它的属性width和值都相同，height并且值设置border-radius为 50%。

结语

这是我尝试的一种新形式。
你们觉得怎么样？
有什么遗漏吗？
请在下方留言！

资源

• 边界半径生成器

• CSS border-radius 可以做到这一点吗？

• MDN

感谢阅读！

哈喽！ Instagram | Twitter | LinkedIn | Medium