CSS边框样式生成器 — 锯齿形、波浪形和扇形边缘
生成装饰性的CSS边框边缘 — 锯齿形、波浪形或扇形 — 普通的border-radius无法生成，通过mask-image和重复渐变为每一侧（上/右/下/左）提供独立的样式、大小和深度。
输入
颜色
上边框
一个重复的宽度 — 一个完整的峰到峰周期，单位像素。
波浪/齿/扇形从平坦边缘延伸多远，单位像素。
右边框
下边框
一个重复的宽度 — 一个完整的峰到峰周期，单位像素。
波浪/齿/扇形从平坦边缘延伸多远，单位像素。
左边框
输出
生成的规则限定在此类中，因此不会与您自己的样式冲突。
输出
您的边框样式将显示在此处。
与上面的预览相匹配 — 与CSS块配对。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-border-style-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"bgColor": "#ffffff",
"edgeColor": "#6366f1",
"topEnabled": "true",
"topStyle": "zigzag",
"topSize": "24",
"topAmplitude": "12",
"rightEnabled": "",
"rightStyle": "wavy",
"rightSize": "24",
"rightAmplitude": "12",
"bottomEnabled": "true",
"bottomStyle": "zigzag",
"bottomSize": "24",
"bottomAmplitude": "12",
"leftEnabled": "",
"leftStyle": "wavy",
"leftSize": "24",
"leftAmplitude": "12",
"className": "io-border-box"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-border-style-generator` tool (CSS Border Style Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-border-style-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS边框样式生成器 — 锯齿形、波浪形和扇形边缘 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
此工具的功能
普通的border和border-radius只能绘制直线和圆角 — 它们无法沿卡片顶部放置撕裂纸张的锯齿形，在横幅下放置波浪形线条，或在优惠券上放置"票根"样式的扇形边缘。此工具使用mask-image（带有重复的linear-gradient/radial-gradient图案）在盒子的每一侧将波形切割成细细的彩色条纹，以纯CSS构建这些装饰性边框 — 无图像文件、无SVG、无JavaScript。
每一侧 — 上、右、下、左 — 独立切换并获得自己的样式（锯齿形、波浪形或扇形），加上自己的大小（一个重复的宽度）和振幅（波浪延伸的深度）。混合每一侧的样式是什么使得票根外观（扇形顶部、直侧）或撕裂笔记本外观（仅顶部和底部锯齿形）成为可能。
如何使用
- 设置盒子背景和边框颜色。
- 对于想要装饰的每一侧，启用它并选择样式：
- 锯齿形 — 锐利的三角形齿，如撕裂边缘或旗帜边框。
- 波浪形 — 与锯齿形相同的峰值/谷值节奏，但圆滑到平滑的S形曲线。
- 扇形 — 一排均匀的圆形凸起，全部以相同方式弯曲 — 邮票穿孔边缘或蕾丝边缘的外观。
- 为每一侧调整大小（峰值之间的间距）和振幅（波浪延伸的距离）。
- 复制CSS和HTML代码片段 — 代码片段是一个包装
<div>加上每个启用的侧面的一个子<div>；CSS将每个子元素掩盖成选定的波形。
为什么使用mask-image而不是border-image或clip-path
border-image是一次应用在整个盒子周围的单个9切片源图像，因此所有四个侧面都被强制为相同图像的变体 — 没有办法为顶部提供锯齿形而为左侧提供普通边框。clip-path可以将盒子的整个轮廓切割成一个形状，但当其他侧面保持笔直时，不能单独切割一个边缘。为每一侧掩盖独立的覆盖条纹是使每个边缘独立切换和配置的原因。
浏览器支持
mask-image在所有当前浏览器中都没有前缀；CSS还在其旁边包含等效的-webkit-mask-*变体，用于仅识别带前缀形式的较旧WebKit引擎。
常见问题
我也可以圆化盒子的实际角吗？
是的 — 将您自己的border-radius添加到包装<div>（此工具生成的.io-border-box样式类）；边框条纹仍会正确掩盖，因为它们是独立的覆盖层，尽管大半径可能需要条纹自己的角手动缓解以实现完美干净的连接。对于不带任何波浪的简单圆角，请改用边框半径生成器。
这与阴影或剪裁形状有何不同？ CSS盒阴影生成器使用模糊软化盒子的边缘，而不是重复的波形图案。CSS剪裁路径生成器将整个盒子切割成一个固定形状（圆形、星形、多边形），而不是在其他侧面保持矩形时装饰一个边缘。
为什么波浪有时会一直切割到盒子的外边缘？ 这是图案的"谷值" — 在两个峰值之间的中点，条纹的掩模变成完全透明，暴露盒子自己的背景颜色。这是有意的：这是使边缘读起来像真正的锯齿形/波浪形/扇形边缘而不是带凸起的直线。
隐私
所有内容都在您的浏览器中运行。您的颜色和设置永远不会发送到服务器 — CSS和预览会在您调整控件时本地更新。