你真的懂 border-radius 了吗?

声明

以下的截图文字说明,来源于 <<CSS揭秘>> 文章的片段

前言

在日常开发中 border-radius 属性是一个非常常用和简单的属性,但是他有一个鲜为人知的真相:它可以单独指定水平 和垂直半径,只要用一个斜杠(/)分隔这两个值即可

分析

为什么叫 border-radius?

border-radius-explain

border-radius 的更多用法

border-radius

下面还有一个图形化的解释,结合上面的文章截图理解:

border-radius1

在线测试DEMO

https://codepen.io/shellWolf/pen/MxpEGb?editors=1100