跳到正文

圆角形状生成

Border Radius Generator

每个角单独给值,含两值写法做出的类超椭圆形状,并导出 CSS。

用全部八个半径值给盒子做圆角,并且——因为“把它做成超椭圆”是同一个问题的另一种问法——也画真正的超椭圆和 `clip-path` 形状,这是 `border-radius` 做不到的。

🔒 完全在你的浏览器里运行border-radiuscssgeneratorshape

预览

CSS

圆角

单位

左上

右上

右下

左下

预设

clip-path

形状

这是另一个属性,干的是另一件事。border-radius 把盒子的角磨圆;clip-path 按任意形状裁切,连影子一起带走。

怎么用

  1. 拖动角的滑块

    四个角,px 或百分比。预览和声明一起更新。

  2. 做不规则形状时关掉“两轴相同”

    那会给出八值的斜杠形式,每个角有一个水平半径和一个垂直半径。所有有机的不规则形状都来自这种形式。

  3. 形状不是矩形时切换到 clip-path

    圆、多边形、对话气泡、V 形——还有超椭圆滑块,它是真正的超椭圆曲线,不是更圆一点的矩形。

常见问题

为什么 9999px 的半径看起来和 50% 一样?

因为当一条边上的半径会重叠时,规范把*全部四个*按同一个系数缩小直到放得下。所以任何离谱的大值都坍缩成同一个形状,页面会显示它用的系数。

CSS 能画真正的超椭圆吗?

用 `border-radius` 不能——那个角严格是椭圆的,所以拴在半径上的“超椭圆滑块”只是一个更圆的矩形。这里的超椭圆是作为 `clip-path` 多边形画出来的,这是今天得到那条曲线的诚实办法。

为什么用了 clip-path 我的阴影消失了?

因为 `clip-path` 裁切元素,而阴影画在元素外面。它也会裁掉溢出的子元素。`border-radius` 两者都不做,所以只要形状是圆角矩形,它就仍然是对的工具。

怎么只给一组元素的外侧角做圆角?

给容器做圆角并加 `overflow: hidden`,或者在各项上用 `:first-child`/`:last-child`。组本身的逐角半径传不到子元素上,按钮组通常就是这样出问题的。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。