CSS 边框样式生成器

功能

• 实线、虚线、点线、双线、3D 凹槽、3D 凸起、波浪图案七种样式
• 边框宽度 1–20px、颜色用取色器选
• 四角圆角可分别设置，也能一键拉成椭圆角
• 斜杠写法输出椭圆角（水平 / 垂直两个半径）
• 可选择只画上、右、下、左某一条边
• 可用 border-image 画可控的虚线或波浪图案
• 预览实时更新，不需要点生成
• 下方给出可复制的 border 与 border-radius 声明
• 所有计算在浏览器本地完成，不上传任何东西

使用方法

1. 先选样式，调宽度与颜色
2. 需要圆角就填四个角，想要椭圆角就调垂直半径比例
3. 只画某一边时把它选成对应的边
4. 想要可控虚线或图案，勾上 border-image 那个开关

常见问题

为什么没法控制虚线的长度？

因为规范没有规定虚线中实线段与空隙的长度，各浏览器按自己的比例画，`border-style: dashed` 只能给一个「虚实相间」的语义，没有任何参数能调段长。想要固定段长（比如一律 8px 段、4px 间隔），必须换用 `border-image` 配重复渐变：把渐变里的色段当作实线、透明段当作空隙，段长就是你写在渐变里的长度。本工具的「可控虚线」开关走的就是这条路。

加了边框之后盒子变大了？

因为默认的 `box-sizing` 是 `content-box`：`width` 只算内容，`border` 与 `padding` 加在它之外。所以宽 200px 的盒子加上 8px 边框，实际占 216px。解决办法是给元素设 `box-sizing: border-box`（现代项目通常全局设一次），之后 `width` 就把边框算在内，调边框不再改变总尺寸。

四个角的圆角怎么写才不同？

`border-radius` 用空格分隔时，四个值依次是左上、右上、右下、左下（从左上开始顺时针）。只写两个值时是「左上右下 / 右上左下」的对角关系，三个值时最后一个补左下的。想要椭圆角（每个角是四分之一椭圆而不是圆），要用斜杠：斜杠前是水平半径、斜杠后是垂直半径，例如 `10px 20px 30px 40px / 5px 10px 15px 20px`。本工具的垂直半径比例就是在生成斜杠后的那一串。

只画一边会不会影响布局？

多少会。只写 `border-top` 时另外三条边的边框宽度按 0 算，所以元素高度只多了上边框那几像素；而一旦整个 `border` 都写，四条边都占空间。对布局敏感的场合（表格、栅格）建议配合 `box-sizing: border-box`，或者改用 `outline` / `box-shadow` 来画不占空间的线。