CSS圆角生成�?/title>  <meta name="description" content="CSS圆角生成�? /> <meta name="keywords" content="css-border-radius,dev,tools" /> <meta name="author" content="WebUtils" /> <meta name="robots" content="index, follow" /> <link rel="canonical" href="https://essays4u.net/tools/dev/css-border-radius.html" />  <meta property="og:title" content="CSS圆角生成�? /> <meta property="og:description" content="CSS圆角生成�? /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://essays4u.net/tools/dev/css-border-radius.html" /> <meta property="og:site_name" content="WebUtils" /> <meta property="og:locale" content="zh_CN" /> <meta property="og:image" content="https://essays4u.net/social-preview.png" />  <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="CSS圆角生成�? /> <meta name="twitter:description" content="CSS圆角生成�? /> <meta name="twitter:image" content="https://essays4u.net/social-preview.png" /> <style> :root { --bg-deep: #0a0a0f; --bg-surface: #12121a; --bg-card: #1a1a24; --bg-input: #0e0e14; --text-primary: #e8e8ed; --text-secondary: #8888a0; --text-muted: #55556a; --border-subtle: #2a2a3a; --border-strong: #3a3a4a; --accent-cyan: #00f5d4; --accent-magenta: #f72585; --accent-green: #10b981; --accent-red: #f43f5e; --accent-yellow: #fbbf24; --accent-blue: #4cc9f0; --accent-purple: #7b2cbf; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-sans: "Space Grotesk", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif; --font-mono: "JetBrains Mono", "Courier New", monospace; --shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="light"] { --bg-deep: #fafafa; --bg-surface: #fff; --bg-card: #fff; --bg-input: #f5f5f5; --text-primary: #1a1a1a; --text-secondary: #666; --text-muted: #999; --border-subtle: #e5e5e5; --border-strong: #d5d5d5; --accent-cyan: #00d4b8; --accent-magenta: #e63975; --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .theme-toggle { position: fixed; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--color-bg-card); cursor: pointer; font-size: 1.2rem; z-index: 100; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { transform: scale(1.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 800px; margin: 0 auto; } h1 { color: #333; text-align: center; margin-bottom: 20px; } .card { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .preview-container { display: flex; justify-content: center; align-items: center; padding: 40px; background: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; border-radius: 12px; margin-bottom: 24px; } .preview-box { width: 200px; height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); transition: all 0.3s; } .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } @media (max-width: 600px) { .controls { grid-template-columns: 1fr; } } .corner { background: #f8f9fa; padding: 16px; border-radius: 12px; } .corner h4 { margin-bottom: 12px; color: #333; display: flex; align-items: center; gap: 8px; } .corner-icon { width: 24px; height: 24px; border: 3px solid #667eea; } .tl .corner-icon { border-radius: 12px 0 0; border-right: none; border-bottom: none; } .tr .corner-icon { border-radius: 0 12px 0 0; border-left: none; border-bottom: none; } .bl .corner-icon { border-radius: 0 0 0 12px; border-right: none; border-top: none; } .br .corner-icon { border-radius: 0 0 12px; border-left: none; border-top: none; } .slider-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .slider-row label { min-width: 20px; color: #666; } .slider-row input[type="range"] { flex: 1; } .slider-row .value { min-width: 50px; text-align: right; color: #333; font-weight: 600; } .link-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; } .link-toggle input { width: 20px; height: 20px; } .output { background: #1e1e1e; color: #9cdcfe; padding: 16px; border-radius: 8px; font-family: var(--font-mono); font-size: 13px; margin-bottom: 16px; } .btn { padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; background: linear-gradient(135deg, #667eea, #764ba2); color: white; transition: all 0.3s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } .presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .preset { padding: 8px 16px; background: #f0f0f0; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; transition: all 0.3s; } .preset:hover { background: #667eea; color: white; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.85rem; padding: 8px 14px; background: var(--color-bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: 20px; } .breadcrumb a { color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s ease; } .breadcrumb a:hover { color: var(--color-accent-cyan); } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { color: #999; margin: 0 5px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } </style>  <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" /> </head> <body> <nav class="breadcrumb"> <a href="../../index.html">首页</a> <span>�?/span> Border Radius 生成�? </nav> <div class="container"> <h1>📐 CSS圆角生成�?/h1> <div class="card"> <div class="presets"> <button class="preset" onclick="applyPreset(0, 0, 0, 0)" aria-label="方形">方形</button> <button class="preset" onclick="applyPreset(8, 8, 8, 8)" aria-label="小圆�?> 小圆�? </button> <button class="preset" onclick="applyPreset(16, 16, 16, 16)" aria-label="中圆�?> 中圆�? </button> <button class="preset" onclick="applyPreset(50, 50, 50, 50)" aria-label="大圆�?> 大圆�? </button> <button class="preset" onclick="applyPreset(100, 100, 100, 100)" aria-label="圆形"> 圆形 </button> <button class="preset" onclick="applyPreset(50, 0, 50, 0)" aria-label="对角">对角</button> <button class="preset" onclick="applyPreset(100, 0, 100, 0)" aria-label="叶子"> 叶子 </button> <button class="preset" onclick="applyPreset(0, 100, 0, 100)" aria-label="反叶�?> 反叶�? </button> <button class="preset" onclick="applyPreset(100, 100, 0, 0)" aria-label="顶部�?> 顶部�? </button> <button class="preset" onclick="applyPreset(0, 0, 100, 100)" aria-label="底部�?> 底部�? </button> </div> <div class="preview-container"> <div class="preview-box" id="preview"></div> </div> <div class="link-toggle"> <input type="checkbox" id="linked" checked onchange="toggleLink()" /> <label for="linked">🔗 同步所有圆�?/label> </div> <div class="controls"> <div class="corner tl"> <h4> <span class="corner-icon"></span> 左上�? </h4> <div class="slider-row"> <label for="input-h">H</label> <input type="range" id="tl-h" min="0" max="100" value="16" oninput="updateRadius('tl-h')" /> <span class="value" id="tl-h-val">16px</span> </div> <div class="slider-row"> <label for="input-v">V</label> <input type="range" id="tl-v" min="0" max="100" value="16" oninput="updateRadius('tl-v')" /> <span class="value" id="tl-v-val">16px</span> </div> </div> <div class="corner tr"> <h4> <span class="corner-icon"></span> 右上�? </h4> <div class="slider-row"> <label for="input-h">H</label> <input type="range" id="tr-h" min="0" max="100" value="16" oninput="updateRadius('tr-h')" /> <span class="value" id="tr-h-val">16px</span> </div> <div class="slider-row"> <label for="input-v">V</label> <input type="range" id="tr-v" min="0" max="100" value="16" oninput="updateRadius('tr-v')" /> <span class="value" id="tr-v-val">16px</span> </div> </div> <div class="corner bl"> <h4> <span class="corner-icon"></span> 左下�? </h4> <div class="slider-row"> <label for="input-h">H</label> <input type="range" id="bl-h" min="0" max="100" value="16" oninput="updateRadius('bl-h')" /> <span class="value" id="bl-h-val">16px</span> </div> <div class="slider-row"> <label for="input-v">V</label> <input type="range" id="bl-v" min="0" max="100" value="16" oninput="updateRadius('bl-v')" /> <span class="value" id="bl-v-val">16px</span> </div> </div> <div class="corner br"> <h4> <span class="corner-icon"></span> 右下�? </h4> <div class="slider-row"> <label for="input-h">H</label> <input type="range" id="br-h" min="0" max="100" value="16" oninput="updateRadius('br-h')" /> <span class="value" id="br-h-val">16px</span> </div> <div class="slider-row"> <label for="input-v">V</label> <input type="range" id="br-v" min="0" max="100" value="16" oninput="updateRadius('br-v')" /> <span class="value" id="br-v-val">16px</span> </div> </div> </div> <div class="output" id="output">border-radius: 16px;</div> <button class="btn" onclick="copyCSS()" aria-label="📋 复制CSS">📋 复制CSS</button> </div> </div> <script> const corners = ["tl", "tr", "bl", "br"]; const dirs = ["h", "v"]; function updateRadius(changed) { const linked = document.getElementById("linked").checked; if (linked) { const value = document.getElementById(changed).value; corners.forEach((c) => { dirs.forEach((d) => { document.getElementById(`${c}-${d}`).value = value; document.getElementById(`${c}-${d}-val`).textContent = value + "px"; }); }); } else { document.getElementById(changed + "-val").textContent = document.getElementById(changed).value + "px"; } render(); } function render() { const values = {}; corners.forEach((c) => { dirs.forEach((d) => { values[`${c}-${d}`] = document.getElementById(`${c}-${d}`).value; }); }); const h = `${values["tl-h"]}px ${values["tr-h"]}px ${values["br-h"]}px ${values["bl-h"]}px`; const v = `${values["tl-v"]}px ${values["tr-v"]}px ${values["br-v"]}px ${values["bl-v"]}px`; const isSimple = corners.every((c) => values[`${c}-h`] === values[`${c}-v`]); const isUniform = corners.every( (c) => values[`${c}-h`] === values["tl-h"] && values[`${c}-v`] === values["tl-v"] ); let css; if (isUniform && isSimple) { css = `border-radius: ${values["tl-h"]}px;`; } else if (isSimple) { css = `border-radius: ${values["tl-h"]}px ${values["tr-h"]}px ${values["br-h"]}px ${values["bl-h"]}px;`; } else { css = `border-radius: ${h} / ${v};`; } document.getElementById("preview").style.borderRadius = `${h} / ${v}`; document.getElementById("output").textContent = css; } function applyPreset(tl, tr, br, bl) { document.getElementById("tl-h").value = document.getElementById("tl-v").value = tl; document.getElementById("tr-h").value = document.getElementById("tr-v").value = tr; document.getElementById("br-h").value = document.getElementById("br-v").value = br; document.getElementById("bl-h").value = document.getElementById("bl-v").value = bl; corners.forEach((c) => { dirs.forEach((d) => { document.getElementById(`${c}-${d}-val`).textContent = document.getElementById(`${c}-${d}`).value + "px"; }); }); render(); } function toggleLink() { if (document.getElementById("linked").checked) { const value = document.getElementById("tl-h").value; corners.forEach((c) => { dirs.forEach((d) => { document.getElementById(`${c}-${d}`).value = value; document.getElementById(`${c}-${d}-val`).textContent = value + "px"; }); }); render(); } } function copyCSS() { navigator.clipboard.writeText(document.getElementById("output").textContent); alert("已复制到剪贴�?"); } render(); </script> </body> </html>