border-radius 是大多数人学习的CSS属性中的第一个,也是他们最后完全理解的属性之一,将卡片的四个角全部四舍五入12像素很容易,那么一个按钮需要是任意宽度的药丸,一个头像需要是一个圆圈,一个聊天泡泡需要一个尖角,突然之间简写顺序,之间的区别 50% 並 999px,以及"停止生长"的半径。一切都很重要。
本指南解释了属性从规范到上的工作原理:每个值计数的含义、百分比与像素的差异、浏览器如何缩放太大的半径、如何构建公共形状以及为什么有时无法出现圆角。这些示例与 CSS边界半径生成器(其),它实时预览每个角落并输出最短的有效速记,它是其中之一 CSS 工具 在工具上。
TL;博士:
border-radiusround a element's 角,一个值设置所有四个角,两个值设置左上/右下和右上/左下对,三个值设置左上,然后右上和左下一起,然后右下,四个值从左上顺时针运行,像素半径是固定曲线;百分比分别根据宽度和高度测量,所以50%仅在正方形上做一个圆,当沿边半径加起来大于边时,浏览器按比例缩放每个半径。 边框半径生成器 为您处理简写,客户端,免费,无需注册。
CSS边框半径属性是做什么的?
的 border-radius property 圆一个元素的外角's 边框框,每个角变成一个椭圆的四分之一,半径水平,半径垂直,当两个半径相等时,角是四分之一圆。
W3C中定义的 CSS背景和边界模块第3级10多年来,每个主要浏览器都支持不加前缀,因此不需要供应商前缀。
圆润影响大于边框线元素's背景剪裁成圆润形状, box-shadow 遵循曲线,在现代浏览器中也是如此 outline。元素内部的内容不会被剪切,除非你添加 overflow: hidden的,这是圆角出现失效的最常见原因。
边框半径速记如何工作?
border-radius 是四种手持属性的简写: border-top-left-radius、 border-top-right-radius、 border-bottom-right-radius 並 border-bottom-left-radius。您给出的值数量决定每个值适用于哪些角。
| 价值观 | 例子 | 左上 | 右上 | 右下 | 左下 |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16便士 | 16便士 | 16便士 | 16便士 |
| 2 | border-radius: 24px 8px; |
24便士 | 8便士 | 24便士 | 8便士 |
| 3 | border-radius: 24px 8px 0px; |
24便士 | 8便士 | 0px | 8便士 |
| 4锛屽湪娴欐睙鏉 | border-radius: 20px 10px 5px 0px; |
20便士 | 10便士 | 5便士 | 0px |
该图案与所使用的顺时针顺序相同 margin 並 padding、从左上角开始而不是从上侧开始,缺失值从他们的对角线伙伴填满:有两个值,右下副本左上和左下副本右上。三个,左下副本右上。
Generator反转这个过程, 你用自己的滑块设置每个角, 它写出最少的值, 产生相同的形状:
- 所有四个角都相等,给出一个值。
- 左上等于右下,右上等于左下,给出两个值。
- 右上等于左下(但另一条对角线不同)给出三个值。
- 其他任何东西都给出四个。
1个后果让人吃惊,仅圆左上角20px,输出为 border-radius: 20px 0px 0px;的,而不是四值 20px 0px 0px 0px.二者正确;三值形式较短,因为右上和左下都是零,每个值都保持其单位,所以一个零角打印为 0px。
边框半径的px和%有什么区别？
A像素半径为绝对尺寸,百分半径相对于元素's尺寸,水平和垂直部分分别测量:水平半径对宽度,垂直半径对高度。
Zai一个正方形上,那些是同一个数,在长方形上,Ta们不是,这就是为什么 50% 将正方形变成圆形,将矩形变成椭圆形。
224px宽160px高的生成器's预览箱取:
| 价值 | 水平半径 | 垂直半径 | 形状 |
|---|---|---|---|
16px |
16便士 | 16便士 | 圆形矩形、圆形角 |
50% |
112px(224 的 50%) | 80px(160的50%) | 椭圆 |
25% |
56便士 | 40便士 | 圆形矩形、椭圆形角 |
999px |
999px,缩放到80px | 999px,缩放到80px | 圆端药丸 |
另外两个单元的行为就像解析后的像素一样。 em 是相对于元素's自己的字体大小和 rem 到根字体大小,所以 1rem 是16px默认浏览器设置。使用 em 或 rem 让角落随着文本大小而缩放,这适合随标签一起生长的按钮和标签。
在生成器中,滑块以全数步长从 0 到 200(px)、0 到 50(%)、0 到 10(em 和 rem)运行。切换单元会保留数字并交换单元,因此 16px 变为 16%,而不是转换值。
为什么大的边框半径不再变圆?
为规范不允许角曲线重叠,当一侧半径加起来超过那一侧's长度时,浏览器会将元素上的每个半径缩小相同的因子,直到它们适合。
的 角重叠规则 zhe样工作,四条边中每一条边's长度除以触摸它的两个半径之和,取那些比中最小de一个,称之为f,如果f小于1,则每yi个半径乘以f。
这是计算 border-radius: 999px 224乘160的预览框上:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
80px半径每个角落结束,恰好是160px高度的一半,所以短端变成完美的半圆,同样的事情发生在200px,像素滑块的顶部:f是160/400 = 0.4,200×0.4又是80px,超过了短边的一半,像素半径停止改变任何东西。
2个实际结果接下来,一个药丸按钮可以使用任何非常大的像素值,并且它在任何宽度下都保持药丸,并且由于在所有四个角上缩放是成比例的,单个超大角也缩小了其他的左上设置为999px,其余的留在20px,20px的角随之缩小。
如何用边框半径制作常见的形状?
界面中的大多数圆形形状来自少数配方。生成器对常见的有预设。
| 形状 | CSS | 注释 |
|---|---|---|
| 锋利 | border-radius: 0px; |
大多数元素的默认值 |
| 微妙 | border-radius: 6px; |
输入、小按钮 |
| 卡 | border-radius: 12px; |
面板和卡片 |
| 圆润 | border-radius: 16px; |
生成器's起始值 |
| 丸 | border-radius: 999px; |
通过重叠缩放以任何宽度工作 |
| 圈 | border-radius: 50%; |
需要相同的宽度和高度 |
| 叶 | border-radius: 0px 24px; |
两个相对的角呈圆形 |
| 斑点 | border-radius: 60% 40%; |
有机形状的百分比不等 |
| 言语泡沫 | border-radius: 16px 16px 16px 0px; |
扬声器附近的一个尖角 |
| 选项卡 | border-radius: 8px 8px 0px 0px; |
顶部圆形,底部平坦 |
圈。 套 50% 1个宽度、高度相等的元素上,头像加 aspect-ratio: 1 並 object-fit: cover 在图像上,非正方形照片不会延伸成椭圆。
丸。 使用大像素值而不是 50%。在一个宽大的按钮上, 50% 产生一个末端尖的椭圆,因为水平半径是宽度的一半。 999px 相反,被缩放到一半的高度,给出圆形末端。
斑点。 的预设 60% 40% 60% 设置左上和右下,另外两个设置为 40% 在预览框上,沿顶部边缘的水平半径为 134.4px 和 89.6px,加起来恰好为 224px,因此不会发生缩放,两条曲线在它们之间没有留下直边的情况下会经过预设,可以超过滑块范围:Blob 使用 60%,Pill 使用 999px,输出会保留这些值,直到您移动滑块。
语音泡沫和选项卡。 Shape 都沒有匹配的對角線對,所以都需要所有的四個值。在生成器中單獨設定角,它確認不存在更短的形式。
边框半径中的斜杠语法是什么?
斜线将水平半径与垂直半径分开,因此每个角都可以是非圆形椭圆,其尺寸可直接选择。
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Slash每边值都遵循与普通速记相同的一到四规则,Toolz生成器不写slash语法:每角设置一个半径,涵盖圆、丸、卡和斑蛋形状和自定义镜头形式,从生成器's输出开始,手工添加slash部分。
为什么我的圆角没有露出来?
X = 1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 border-radius 似乎什么也没做,原因几乎总是其中之一。
| 症状 | 原因 | 修复 |
|---|---|---|
| 图像或孩子从角落里戳出来 | 默认情况下不会剪辑儿童 | 添加 overflow: hidden 交给四舍五入的父母,或者也交给孩子 |
| 根本没有明显的变化 | 元素没有背景、边框或阴影 | 赋予它背景颜色或边框,以便形状可见 |
| 桌角保持方形 | border-collapse: collapse 桌子上 |
用 border-collapse: separate 与 border-spacing: 0或者将包装纸绕一圈 |
| 圆圈看起来像一个椭圆形 | 宽度和高度不同 | 设置等尺寸或 aspect-ratio: 1 |
| 药丸有尖端 | 使用 50% 在宽元素上 |
使用像这样的大 px 值 999px |
| 半径停止增加 | 重叠缩放 | 预期;半径上限为较短边的一半 |
| 内元素角看起来更厚 | 内半径等于衬垫内的外半径 | 将内半径设置为外半径减去衬垫 |
最后一张是微妙的。一张卡片 border-radius: 16px 並 padding: 8px 16px半径相同的图像,看起来不均匀,因为内曲线应该更紧,跟着外曲线走的内半径是16减8,所以8px。
边框半径如何与阴影和梯度结合?
圆角很少单独发货,一张卡片通常有阴影,并且经常有渐变背景,并且两者都自动遵循圆形。
box-shadow traces圆边框,所以12px卡片下面的软影子有12px圆角,没有任何额外的工作。的 盒子阴影生成器 预览圆形元素上的阴影,以及 盒子阴影指南 解释其背后的偏移值、模糊值和价差值。
背景(包括梯度)也被剪裁到圆形。要设计填充物,请使用 CSS梯度生成器;的 CSS 梯度指南 穿过语法。如果角大小应该与视口缩放而不是保持固定,则 CSS 钳形生成器 构建a clamp() value 可以用作半径,例如手机上的 8px 和宽屏幕上的 20px 卡。
使用生成器,一步一步
- 选择一个预设 如卡片、药丸、圆圈或 Blob,或者从默认的 16px 角开始。
- 调整角落。 角切换默认为独立,其中每个滑块仅移动自己的角。将其切换到 Linked 以将所有四个一起移动。
- 选择一个单位: px、%、em 或 rem。
- 检查预览。 渐变框在拖动时更新,包括大值上的重叠缩放。
- 复制 CSS。 "复制 CSS"按钮复制完整内容
border-radius:声明的最短形式。
Everything都运行客户端:预览和代码是JavaScript在你的浏览器中生成的,没有任何上传,页面一旦加载就一直离线工作,当你准备好了, 打开边框半径生成器、设置您的角落,并将声明直接粘贴到您的样式表中。
