边界半径

border-radius builds upon the basic border property to turn the corners of any element into a quarter-ellipse. The property can take any CSS unit of measurement as a value.

border-radius建立在基本border属性的基础上，可将任何元素的角变为四分之一椭圆。 该属性可以将任何CSS度量单位作为值。

Note that the latest versions of all browsers, including IE, Chrome and Opera, follow the border-radius property; vendor prefixes are only required to cover older browsers.

请注意，所有浏览器的最新版本(包括IE，Chrome和Opera)都遵循border-radius属性。 供应商前缀仅用于覆盖较旧的浏览器。

Given a <div> with an id value of #bestanime that contains a heading and an ordered list:

给定一个id值为#bestanime的<div> ，其中包含一个标题和一个有序列表：

<div id="bestanime">
	<h3>Top Three Anime DVDs</h3>
	<ol>
		<li>Ghost In The Shell
		<li>Spirited Away
		<li>Akira
	</ol>
</div>

You could apply border-radius as follows to turn the corners of the div:

您可以按如下所示应用border-radius来旋转div的角：

div#bestanime {
	border: 5px double #000;
	border-radius: 20px;
}

border-radius can also be specified for individual corners, if you wanted to turn just one:

如果只想旋转一个，也可以为各个角指定border-radius ：

div#bestanime {
	border: 5px double #000;
	border-radius-topright: 30px;
}

提示，技巧和更多资源 (Hints, Tips & Further Resources)

It is also possible to give border-radius different height and width values, so that rather than perfect semi-circles, the corners become ellipses, as I used when making Wall-E’s EVE in CSS3:

也有可能给border-radius不同的高度和宽度值，这样，就像我在CSS3中制作Wall-E的EVE所使用的那样，拐角就变成了椭圆，而不是完美的半圆：

div#bestanime {
	border: 5px double #000;
	border-top-left-radius: 75px 60px;
}

Note that box-shadow maps to border-radius. Also note that two separated values for border-radius, such as 60px 3px, does not do what you might expect: the first value affects the top left and bottom right corner of the element, and the second value the top right and bottom left.

注意box-shadow映射到border-radius 。 还要注意，两个分开的border-radius值(例如60px 3px )不能满足您的期望：第一个值影响元素的左上角和右下角，第二个值影响右上角和左下角。

You may find that large border-radius sizes with thick borders and high-contrast colours displayed in older browsers do look slightly “chunky” due to poor anti-aliasing when rendering the ellipses; on the whole, this is improved in newer browser versions.

您可能会发现，在较旧的浏览器中显示的较大边框border-radius ，粗边框和高对比度颜色看上去确实有些“矮胖”，这是因为渲染椭圆时抗锯齿效果很差； 总的来说，这在新的浏览器版本中得到了改进。

Trying to place multiple borders on an element can get complicated when those borders have border-radius applied to them. A very well-researched article on the correct numbers to use with nested borders.

当在边框上应用border-radius时，尝试在元素上放置多个边框会变得很复杂。 一篇经过精心研究的文章，介绍了与嵌套边界配合使用的正确数字 。

border-radius.com is a neat code generator for turned corners; the Mozilla Developer Network features a similar service.

border-radius.com是用于转弯的简洁代码生成器； Mozilla开发人员网络具有类似的服务 。

翻译自: https://thenewcode.com/294/border-radius