DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
您可以通过 CSS 应用 border-radius
为任何元素赋予“圆角”。只有在涉及颜色变化时您才会注意到它。例如,如果元素的背景颜色或边框颜色与它上方的元素不同。
.element {
border-radius: 10px;
}
组成属性
border-radius
是我们所说的“简写”属性。这意味着它在一个声明中设置以下各个属性
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
逻辑属性
这些被称为“物理”属性,因为它们根据角的物理位置(例如左上)设置半径。但 border-radius
是逻辑属性和值规范的一部分,这意味着它具有 物理属性的逻辑等效项
物理属性 | 逻辑属性 |
---|---|
border-top-left-radius | border-start-start-radius |
border-top-right-radius | border-start-end-radius |
border-bottom-left-radius | border-end-start-radius |
border-bottom-right-radius | border-end-end-radius |
起初有点令人费解,但顺序确实很重要,尤其是在将 border-radius
作为简写使用时。顺序如下,其中第一个方向指的是块方向,第二个方向指的是内联方向。
物理属性 | 逻辑属性 |
---|---|
左上 | 开始-开始 |
右上 | 开始-结束 |
左下 | 结束-开始 |
右下 | 结束-结束 |
语法
border-radius: <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
- 初始值:
0
- 应用于:所有元素
- 继承:否
- 计算值:一对计算的 <length-percentage> 值
- 动画:按计算值
border-radius
属性最多接受四个长度或百分比值,其中一个值同时为所有四个角设置半径,而四个值分别设置每个角。
/* Single value */
/* Sets all four corners */
border-radius: 10px;
/* Two values /*
/* top-left and bottom-right top-right and bottom-left */
border-radius: 25% 0;
/* Three values */
/* top-left top-right/bottom-left bottom-right */
border-radius: 1rem 1.5rem 1.25rem;
/* Four values */
/* top-left top-right bottom-right bottom-left */
border-radius: 8px 10px 12px 14px;
/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;
因此,如果我们想要在左上和右下角设置不同的半径,但在右上和左下角应用相同的半径,我们可以使用三值语法
.element {
/* top-left top-right/bottom-left bottom-right */
border-radius: 5px 20px 5px;
background: #BADA55;
}
/
)
椭圆形圆角 (您还可以指定角的圆角半径。换句话说,圆角不一定是完美的圆形,可以是椭圆形。这是通过在两个值之间使用斜杠 (/
) 来完成的
.element {
border-radius: 10px / 30px; /* horizontal radius / vertical radius */
}
注意: Firefox 仅在 3.5+ 版本中支持椭圆形边框。较旧的 WebKit 浏览器(例如 Safari 4 及更低版本)会错误地将 40px 10px
与 40px / 10px
等同对待。
值
border-radius
属性可以接受任何有效的 CSS 长度单位。这意味着从 px
、rem
、em
、ch
、vh
、vw
等,以及更多其他单位都是可以使用的。
您可以以百分比指定 border-radius
的值。这对于创建 圆形或椭圆形 特别有用,但可以在您希望 border-radius
与元素宽度直接相关联的任何时候使用。
.element {
border-radius: 50%;
width: 200px;
}
注意: 在 Safari 中,border-radius
的百分比值仅在 5.1+ 版本中受支持。在 Opera 中,仅在 11.5+ 版本中受支持。
注意事项
在使用 border-radius
属性时,有一些需要注意的事项
裁剪背景图片
如果元素有图片背景,它会自然地在圆角处被裁剪。
.element {
border-radius: 20px;
background: url(bglines.png); /* will get clipped */
}
背景颜色溢出
有时,当存在border-radius
时,你会看到background-color
“泄漏”到边框之外(这是一个完美的例子)。为了防止这种情况,可以使用CSS的background-clip
属性。
.element {
border-radius: 10px;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
重叠的圆角
Jay Sitter 讲解了当一个角的圆角值过大以至于与另一个角的圆角重叠时会发生什么。就像这个例子,我们想要在右侧创建一个“药丸”形状,而在左侧则圆角较小。
我们设置了左上角和左下角的圆角为40px
,但为什么它们看起来如此方正?这是因为其他两个角的999em
值覆盖了它们。Jay 深入探讨了背后的数学原理以及如何防止这种情况发生,因此阅读他的文章以了解更多背景信息是值得的。
演示
浏览器支持
此浏览器支持数据来自Caniuse,其中包含更多详细信息。数字表示浏览器从该版本及以上版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4* | 3* | 9 | 12 | 3.1* |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 2.1* | 3.2* |
现在不需要前缀了,但是为了获得最佳的浏览器支持,你可以使用-webkit-
和-moz-
作为属性前缀,以确保旧版浏览器也能正常使用该功能。
.element {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
请注意这些属性的顺序:供应商前缀首先列出,非前缀“规范”版本最后列出。这是正确的做法。圆角边框是一个特别好的例子,说明了我们为什么要这样做。在使用border-radius
的稍微复杂一点的版本(其中传递两个值而不是一个值)中,旧的-webkit-
供应商前缀会执行与“规范”版本完全不同的操作。因此,如果我们盲目地将相同的值复制粘贴到所有三个属性中,可能会在不同浏览器中看到不同的结果。为了长期保持最大的一致性,最好将“规范”版本放在最后。
现在可以放心地删除前缀,只使用原生border-radius
,如这里所述。
以下是每个单独的属性,以及供应商前缀。
.element {
-webkit-border-top-left-radius: 1px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 4px;
}
这些值中的每一个也可以具有空格分隔的值,例如5px 10px
,其行为与简写中的斜杠分隔的值相同(<horizontal-radius>
[space]
<vertical-radius>
)。
不错的教程!
这个教程是最新的吗?我在任何地方都没有看到发布时间。
不管怎样,不错的教程!
;)
;)
:)
;)
这真的很棒..谢谢
在Android 2.2和2.2.1上,默认浏览器看起来一点都不好。
你的网站甚至都加载不了
你好,
我确实非常需要一些技巧来使边框半径在Android浏览器上看起来更平滑,所以我提出了这个简单而有效的解决方案。我只是在我的css类中添加了如下所示的box-shadow
-webkit-box-shadow: 0 0 1px #000;
阴影的x和y位置为0,因此阴影居中,我们只需要调整模糊值,将其扩展到角边缘上方1px(根据需要),使它们看起来更平滑。当然,阴影颜色必须与圆角元素的背景/边框颜色相同…
只在你的css中添加这行代码有一个小问题:是的…它将定位所有-webkit浏览器,使边框半径看起来(稍微)不那么锐利。
现在,如果你是一位可以接受少量妥协的设计师,那么它应该可以像这样为你工作,但如果你像我一样是一个挑剔的怪人,你绝对应该找到一种方法将你的CSS定位到特定的设备。
在我写这篇文章的时候,我还没有想到完美的解决方案,但是你可以很好地利用媒体查询来限制规则,无论你使用'max-width'属性(至少根据屏幕宽度限制设备范围,防止webkit桌面浏览器)还是'-webkit-device-pixel-ratio'来根据像素密度定位不同的Android设备
@media only screen and (-webkit-device-pixel-ratio:.75){
/*针对低密度(ldpi)Android布局*/
}
@media only screen and (-webkit-device-pixel-ratio:1){
/*针对低密度(ldpi)Android布局*/
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
/*针对低密度(ldpi)Android布局*/
}
最好的祝愿,祝大家设计愉快。希望我帮助了一些绝望的Android边框半径痴迷的设计师;)
不错。感谢你的帮助 :)
如果你还在阅读评论,我很想知道为什么这在我的网站上不起作用。我在“照片”下面有一个下拉菜单,如首次悬停时可见,角是圆角,但随后它们恢复为方形角。我没有看到我格式化角的方式有任何错误,奇怪的是它在更改边框颜色之前是有效的,然后它停止了。
http://danielpaymar.com
css是
mainMenu.ddsmoothmenu ul li ul{
}
不错的教程。解释得很到位。你超越了大多数其他教程,解释了一些其他人只能梦寐以求的事情。谢谢。
你那里有一些很棒的东西。
顺便说一句,不错的教程
谢谢
嗨,
我正在尝试将border-radius应用于div,该div具有渐变色的边框。
但它不允许我应用border-radius。
以下是我的代码片段。
.border:nth-child(1) {border-image: -webkit-linear-gradient(#000, #fff) 14% 14% 14% 14% stretch; }
.border{ border-radius:15px; -webkit-border-radius:15px; }
.border {display: inline;float: left;margin: 15px;position: relative;border-width: 20px;width: 160px;height: 160px;}
Lorem Ipsum
如何支持IE 6、7、8浏览器。
请发表您的评论
天哪,示例中使用的绿色在十六进制值中是“超赞的”!!! – #BADA55
感谢您的教程!
是否有可能访问被
border-radius
裁剪的“空白区域” ?例如,将其颜色更改为不同于背景的颜色。
感谢另一个很棒的教程!
我刚刚利用学到的知识更进一步,使响应式图像上的圆角保持成比例。
正方形图像在100%下使用15px的圆角将是
border-radius: 5%
要在300px x 650px上实现相同的效果,将是
border-radius: 2.31%/5%
这是通过将像素半径除以宽度和高度计算得出的。当图像缩放时,角将完美圆润并保持与图像大小成比例。
这正是我搜索的内容。非常感谢!
作者需要将此评论添加到文章中。
嗨,Chris,我真的很感谢你的工作和你提供的帮助。希望你能帮助解决这个问题……我一直在处理圆角,并且在div背景中的图像和具有不透明度值的边框的圆角方面遇到了问题。它在Firefox中有效,但Safari始终将图像显示到外边缘。你有什么想法可以解决这个问题吗?
这是代码
div { height:250px; width:250px; background-image:url(image.jpg);}
.round {
border-radius: 60px; /* 防止背景颜色泄漏 */
border: 20px solid rgb(18, 50, 51);
border: 20px solid rgba(18, 50, 51, 0.9);
-webkit-background-clip: padding-box;/* 适用于Safari */
-moz-border-radius:360px;/* Firefox – 旧语法 */
}
请帮我问问,同样的CSS是否适用于背景图像,如果可以,如何实现!
使用百分比非常适合响应式CSS圆形,但它在iOS 5.0以下出现问题,我遇到了这个问题。
关于您提到的边框半径百分比缺乏支持,在响应式网站开发方面是否有好的解决方法?
它在IE9中不起作用
非常感谢
三星Galaxy S4默认Android浏览器中存在一个错误。您必须使用
而不是
http://stackoverflow.com/questions/17944749/border-radius-style-doesnt-work-in-android-browser
IE8怎么样
太棒了……谢谢
太棒了!谢谢。
padding: 5px 0 5px 5px;
width: 100%;
background-color: rgb(73, 180, 31);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
当我在div中引入填充时,它会失去圆角,只显示左侧的两个圆角,而右侧角保持方形,如何才能显示所有圆角?
我在我的三星Galaxy Y Android v.2.3手机上看到了这篇文章,所有示例看起来都很好,但是当我在我的网站上使用border-radius时,图像看起来是方形的,我感到困惑,我不明白发生了什么,我直接将border-radius应用于图像元素……有什么想法吗?
这是我的CSS
img{
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius: 50%;
-webkit-box-shadow: 0px 0px 7px 0px rgba(119, 119, 119, 0.5);
-moz-box-shadow: 0px 0px 7px 0px rgba(119, 119, 119, 0.5);
box-shadow: 0px 0px 7px 0px rgba(119, 119, 119, 0.5);
}
简单易懂。是的
你好
这工作得很好,但在任何三星S2/S4原生浏览器上都不能在canvas元素上使用border-radius
此致,
Iskren
查看CanIUse.com – 它将显示哪些浏览器可以使用该代码以及可以使用哪些版本。
非常感谢…
哇
有没有办法根据关键帧动画更改圆角?例如,在20%时将半径设置为5%,50% = 20%,75% = 30%,100% = 50%……
当然可以!
大家好!
我只是想感谢你们付出的巨大努力,使Css-tricks成为网络上最好的css和前端开发参考之一。
http://mirchu.net/material-design-icons/ 对你很有帮助.. css材质设计图标
谢谢,这太有帮助了。xx
太棒了,而且颜色也很酷。
我很高兴我不是唯一注意到的人
现在,现代浏览器几乎都支持使用单行而不是前缀(-webkit,-moz,-o)来支持border-radius,我认为我们应该为未来的项目部分移除前缀,还有一件事,如果您仍然对形状和前缀CSS感兴趣,请访问我的网络工具,使其更容易设置
http://mystorage.biz/
然后告诉我你的意见。
谢谢
非常感谢。非常有帮助
真的,它太棒了,而且非常有帮助。谢谢
目前正在使用Android 2.0.2原生浏览器浏览(这是一个非常过时的浏览器,根本无法处理任何过渡,大多数页面顶部都有广告横幅,导致出现错误)。令人惊讶的是,除了百分比值外,阴影框在所有情况下似乎都有效。我将尝试使用-webkit-前缀,如果有效,我会发布结果。附言:阅读体验很好,感谢您提供高质量的内容。
我的意思是边框半径,而不是阴影框:-
非常感谢!!!!!! :) 我使用了border-radius: 0px 50px 50px 0px; 它起作用了!
谢谢,这是一个很棒的教程。您可以使用此页面上的边框半径生成器查看css结果:https://css-tools.com/border-radius
我真的不明白2个值的规则的理由。为什么不匹配填充和边距?2个值=顶部和底部。
当我们在border-color中给出两个值时,第一个值应用于顶部和底部,第二个值应用于
应用于右侧和左侧。您提到的内容是错误的。请检查一下。
使用边框半径时,有时会出现尖锐的边框。如何修复使其成为平滑的边框?
我有一个挑战:使边框半径相对于容器宽度按比例缩放,即使在矩形元素上也保持圆形纵横比(我的意思是防止它们变成椭圆形)
✨ Ana已经为您准备好了:https://css-tricks.org.cn/various-methods-for-expanding-a-box-while-preserving-the-border-radius/
你好,
我想知道是否有办法为div设置一个带尖端边框。
就像这样
| \
|______/
有没有办法在HTML中做到这一点?