圆角形状生成
Border Radius Generator
每个角单独给值,含两值写法做出的类超椭圆形状,并导出 CSS。
用全部八个半径值给盒子做圆角,并且——因为“把它做成超椭圆”是同一个问题的另一种问法——也画真正的超椭圆和 `clip-path` 形状,这是 `border-radius` 做不到的。
预览
CSS
圆角
左上
右上
右下
左下
预设
clip-path
这是另一个属性,干的是另一件事。border-radius 把盒子的角磨圆;clip-path 按任意形状裁切,连影子一起带走。
怎么用
拖动角的滑块
四个角,px 或百分比。预览和声明一起更新。
做不规则形状时关掉“两轴相同”
那会给出八值的斜杠形式,每个角有一个水平半径和一个垂直半径。所有有机的不规则形状都来自这种形式。
形状不是矩形时切换到 clip-path
圆、多边形、对话气泡、V 形——还有超椭圆滑块,它是真正的超椭圆曲线,不是更圆一点的矩形。
常见问题
为什么 9999px 的半径看起来和 50% 一样?
因为当一条边上的半径会重叠时,规范把*全部四个*按同一个系数缩小直到放得下。所以任何离谱的大值都坍缩成同一个形状,页面会显示它用的系数。
CSS 能画真正的超椭圆吗?
用 `border-radius` 不能——那个角严格是椭圆的,所以拴在半径上的“超椭圆滑块”只是一个更圆的矩形。这里的超椭圆是作为 `clip-path` 多边形画出来的,这是今天得到那条曲线的诚实办法。
为什么用了 clip-path 我的阴影消失了?
因为 `clip-path` 裁切元素,而阴影画在元素外面。它也会裁掉溢出的子元素。`border-radius` 两者都不做,所以只要形状是圆角矩形,它就仍然是对的工具。
怎么只给一组元素的外侧角做圆角?
给容器做圆角并加 `overflow: hidden`,或者在各项上用 `:first-child`/`:last-child`。组本身的逐角半径传不到子元素上,按钮组通常就是这样出问题的。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出,结果可以直接送过去。
流式尺寸 clamp 计算
Fluid Size Calculator
算出一条 clamp() 表达式,让尺寸在两个视口宽度之间平滑变化。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS,不重排任何声明,原本的记号序列一个不动。
CSS 阴影生成
Box Shadow Generator
一边预览一边叠多层盒阴影和文字阴影,并导出对应的 CSS。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色,并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色,也可以用屏幕吸管或从上传的图片里取色,并按任意表示法复制出来。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分,并推荐最接近的能通过的颜色。