本文摘自 勾三股四 更早时期的 不老歌 博客。
摘自W3C的官方文档：
Name: border-top-right-radius, border-bottom-right-radius,
border-bottom-left-radius, border-top-left-radius</strong>
Value: [ ＜length＞ | ＜percentage＞ ] [ ＜length> | ＜percentage＞ ]?
Initial: 0
Applies to: all elements (but see prose)
Inherited: no
Percentages: Refer to corresponding dimension of the border box.
Media: visual
Computed value: two absolute <length> or percentages
<strong>Name: border-radius</strong>
Value: [ ＜length＞ | ＜percentage＞ ]{1,4} [ / [ ＜length＞ | ＜percentage＞ ]{1,4} ]?
Initial: 0
Applies to: all elements, except table element when ‘border-collapse’ is ‘collapse’
Inherited: no
Percentages: Refer to corresponding dimension of the border box.
Media: visual
Computed value: see individual properties</pre>解读：
值的最规矩的写法应该是两个参数，参数类型为长度值或百分数。这两个参数分别代表这个角落的边框圆角的横向半径和纵向半径，当横纵向半径相同时，第二个参数可以省略。
比如：
border-top-right-radius: 20px 10px;
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 30px;值的最规矩的写法应该是4组参数，每一组参数都是中间有一个斜杠的两个参数。如果某一组参数中的两个参数值相同，则第二个参数和斜杠均可以省略。如果第二组参数和第四组参数相同，则第四组参数可以省略。如果第一组参数和第三组参数相同同时第二组参数和第四组参数相同，则第三组和第四组参数均可以省略。如果四组参数均相同，则第二组、第三组和第四组参数均可以省略。
比如：
border-radius: 20px / 10px; /* 椭圆 */
border-radius: 20px 10px; /* 一个“扭曲”的圆角，不解释 */
border-radius: 30px; /* 最常见的用法 */此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。