绘制智能变换圆角及椭圆

来源：互联网发布：什么叫顶级域名编辑：程序博客网时间：2024/06/08 12:28

在 WEB 交互中，常常会出现圆角的点击按钮。

众所周知，我们可以通过 border-radius 属性对 DIV 进行设置。

比如下图：我们设置div高度120px，此时的 border-radius：60px 代表四个圆角都是60px。这是什么意思呢？是这样的，radius属性是以一个半径 60px 的圆对div进行裁剪，即下图黑色的圆形。

同样地，CSS3不仅可以创造圆角，还可以切出椭圆：同样在宽300px、高120px的div，可以设置椭圆的两个半轴border-radius:150px/60px;

我们会想到一个问题：加入DIV的宽高变化了，那么指定的radius值就不能自动响应了。没错，我们运用百分数就就完美解决这个问题。

下图：border-radius:50%/50%;

哈哈，ok

1 0