首页 / 知识

关于跨浏览器：使用CSS创建圆角

2023-04-11 23:15:00

Creating rounded corners using CSS

如何使用CSS创建圆角？

自从引入CSS3以来，使用CSS添加圆角的最佳方法是使用border-radius属性。您可以阅读有关该属性的规范，或获取有关MDN的一些有用的实现信息：

如果您使用的浏览器未实现border-radius(Chrome v4之前的版本，Firefox v4之前的版本，IE8，Opera v10.5之前的版本，Safari v5之前的版本)，则以下链接详细介绍了许多不同的功能方法。找到适合您的网站和编码风格的一种，然后选择它。

CSS设计：创建自定义角
和边界

CSS圆角'Roundup'

CSS的25种圆角技巧

我在创建Stack Overflow的早期就已经看到了这一点，找不到任何创建圆角的方法，这并没有让我觉得自己只是穿过下水道。

CSS3确实定义了

1	border-radius:

正是您希望它如何工作。尽管这在Safari和Firefox的最新版本中可以正常工作，但在IE7(我也不认为在IE8中)或Opera中根本不起作用。

同时，它一直都在被黑客入侵。我很想听听其他人认为目前在IE7，FF2 / 3，Safari3和Opera 9.5上执行此操作最干净的方法。

如果浏览器不支持css，我通常会得到圆角，如果浏览器不支持它们会看到带有圆角的内容。如果圆角对您的网站不是很重要，则可以在下面使用这些线。

如果要使用半径相同的所有角，这是简单的方法：

1
2
3
4

.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}

但是，如果您想控制每个角落，那就太好了：

1
2
3
4
5
6
7

.my_rounded_corners{
border: 1px solid #ccc;

/* each value for each corner clockwise starting from top left */
-webkit-border-radius: 10px 3px 0 20px;
border-radius: 10px 3px 0 20px;
}

正如您在每个集合中看到的那样，您拥有特定于浏览器的样式，并且在此第四行中，我们以此为标准进行声明，我们假设如果将来其他(也希望是IE)决定实现该功能以使我们的样式也能为他们准备好。

如其他答案所述，这在Firefox，Safari，Camino，Chrome上都能很好地工作。

如果您有兴趣在IE中创建角落，则可能有用-http://css3pie.com/

我建议使用背景图片。其他方法则差强人意：没有抗锯齿和毫无意义的标记。这不是使用JavaScript的地方。

正如Brajeshwar所说：使用border-radius css3选择器。现在，您可以分别将-moz-border-radius和-webkit-border-radius应用于基于Mozilla和Webkit的浏览器。

那么，Internet Explorer会怎样？ Microsoft有许多行为使Internet Explorer具有一些额外的功能并获得更多的技能。

此处：一个.htc行为文件，用于从CSS中的border-radius值获取round-corners。例如。

1
2
3
4
5
6

div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}

当然，行为选择器不是有效的选择器，但是您可以将其置于带有条件注释的其他CSS文件中(仅适用于IE)。

行为HTC文件

由于在较新版本的Firefox，Safari和Chrome中实现了对CSS3的支持，因此查看"边界半径"也将很有帮助。

1
2
3

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

像任何其他CSS速记一样，以上内容也可以以扩展格式编写，从而为topleft，topright等实现不同的Border Radius。

1
2
3
4
5
6
7
8

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 3px;

jQuery是我亲自处理的方式。 css支持很少，图像太笨拙了，即使有些人无疑会反对，但能够选择想要在jQuery中具有圆角的元素对我来说是很有意义的。有一个我最近在这里工作的项目使用的插件：http://plugins.jquery.com/project/jquery-roundcorners-canvas

总是有JavaScript的方式(请参阅其他答案)，但是由于它是纯粹的样式，因此我反对使用客户端脚本来实现此目的。

我喜欢的方式(尽管有其局限性)是使用4个圆角图像，这些图像将使用CSS定位在框的4个角中：

1	<!-- content -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/********************************
* Rounded styling
********************************/

.Rounded {
position: relative;
}

.Rounded .RoundedCorner {
position: absolute;
background-image: url('SpriteSheet.webp');
background-repeat: no-repeat;
overflow: hidden;

/* Size of the rounded corner images */
height: 5px;
width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
top: 0;
left: 0;

/* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
top: 0;
right: 0;

/* Move the sprite sheet to show the appropriate image */
background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
bottom: 0;
left: 0;

/* Move the sprite sheet to show the appropriate image */
background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
bottom: 0;
right: 0;

/* Move the sprite sheet to show the appropriate image */
background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
bottom: -20px;
right: -1px;
}

如前所述，它有其局限性(圆角框后面的背景应为纯色，否则拐角处的背景将不匹配)，但对于其他任何情况，它都非常有效。

更新：通过使用精灵表改进了激励。

在Safari，Chrome，Firefox> 2，IE> 8和Konquerer(可能还有其他)中，您可以使用border-radius属性在CSS中进行操作。由于尚未正式成为规范的一部分，请使用供应商特定的前缀...

例

1
2
3
4
5

#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

JavaScript解决方案通常会添加一堆小的div使其变圆，或者使用边框和负边距使1px的缺口角变大。有些人可能会在IE中使用SVG。

IMO，CSS方法比较好，因为它很容易，并且会在不支持CSS的浏览器中正常降级。当然，这仅是客户端不在不受支持的浏览器(例如IE <9)中强制实施的情况。

我个人最喜欢此解决方案，它是一个允许IE渲染弯曲边框的.htc。

Curved corner (border-radius) cross browser

这是我最近做的HTML / js / css解决方案。 IE中的绝对定位存在1px的舍入错误，因此您希望容器的像素宽度为偶数，但这很干净。

HTML：

Content

jQuery的：

1
2
3

$("div.s")
.wrapInner("")
.prepend('');

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/*rounded corner orange box - no title*/
.s {
position: relative;
margin: 0 auto 15px;
zoom: 1;
}

.s-iwrap {
border: 1px solid #FF9933;
}

.s-iwrap2 {
margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
background: url(css/images/orange_corners_sprite.webp) no-repeat;
line-height: 1px;
font-size: 1px;
width: 9px;
height: 9px;
position: absolute;
}

.s .br {
bottom: 0;
right: 0;
background-position: bottom right;
}

.s .bl {
bottom: 0;
left: 0;
background-position: bottom left;
}

.s .tl {
top: 0;
left: 0;
background-position: top left;
}

.s .tr {
top: 0;
right: 0;
background-position: top right;
}

图片只有18px宽，并且所有4个角都打包在一起。看起来像个圆圈。

注意：您不需要第二个内部包装器，但是我喜欢在内部包装器上使用边距，以便段落和标题的边距仍然保持边距折叠。
您也可以跳过jquery，仅将内部包装放入html中。

为了表明圆角工作的复杂性，雅虎甚至不鼓励它们使用(请参见第一个项目符号)！诚然，他们在该文章中只讨论了1个像素的圆角，但有趣的是，即使是一家拥有专业知识的公司也得出结论，他们很难忍受大部分时间的困扰。

如果您的设计可以在没有它们的情况下生存下来，那是最简单的解决方案。

我发现Ruzee Borders是唯一在所有主要浏览器(Firefox 2/3，Chrome，Safari 3，IE6 / 7/8)上都可以使用的基于Java的抗锯齿圆角解决方案，而ALSO在以下情况下也是唯一可行的解??决方案：圆形元素和父元素都包含背景图像。它还具有边框，阴影和发光效果。

较新的RUZEE.ShadedBorder是另一个选项，但是它不支持从CSS获取样式信息。

当然，如果宽度是固定的，那么使用CSS超级简单，而且一点也不冒犯或费力。当您需要双向扩展时，事情就会变得混乱。一些解决方案使彼此叠放的div数量惊人，以使其实现。

我的解决方案是告诉设计师，如果他们想使用圆角(暂时)，则必须为固定宽度。设计师喜欢圆角(我也是)，因此我认为这是一个合理的折衷方案。

除了上面提到的htc解决方案之外，这里还有另一个解决方案和示例，可以解决IE中的各种问题。

没有"最好的"方法；有些方法对您有效，而有些方法则无效。话虽这么说，我在这里发布了一篇有关创建基于CSS + Image的流畅圆角技术的文章：

使用CSS和图像的带有圆角的框-第2部分

此技巧的概述是使用嵌套的DIV以及背景图像的重复和定位。对于固定宽度的布局(固定宽度的可拉伸高度)，您将需要三个DIV和三个图像。对于可变宽度的布局(可拉伸的宽度和高度)，您将需要九个DIV和九个图像。有些人可能认为它太复杂了，但是恕我直言，它是迄今为止最简洁的解决方案。没有黑客，没有JavaScript。

如果您要使用border-radius解决方案，那么可以使用这个很棒的网站来生成CSS，以使其可用于Safari / chrome / FF。

无论如何，我认为您的设计不应取决于圆角，如果您查看Twitter，他们只会向IE和歌剧用户说F ****。圆角是一个不错的选择，对于没有使用IE的酷用户，我个人认为可以保留它：)。

现在，这当然不是客户的意见。
这是链接：http://border-radius.com/

不要使用CSS，jQuery已经被多次提及。如果您需要完全控制元素的背景和边框，请尝试使用jQuery背景画布插件。它将HTML5 Canvas元素放置在背景中，并允许您绘制所需的每个背景或边框。圆角，渐变等。

我不久前写了一篇博客文章，所以有关更多信息，请参见此处

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

This is the text that is displayed

<style>
div.item_with_border
{
border: 1px solid #FFF;
postion: relative;
}
div.item_with_border > div.border_top_left
{
background-image: url(topleft.webp);
position: absolute;
top: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_top_right
{
background-image: url(topright.webp);
position: absolute;
top: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_left
{
background-image: url(bottomleft.webp);
position: absolute;
bottom: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_right
{
background-image: url(bottomright.webp);
position: absolute;
bottom: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
</style>

效果很好。不需要Javascript，只需CSS和HTML。以最小的HTML干扰其他内容。它与Mono发布的内容非常相似，但是其中不包含任何IE 6特定的黑客工具，经检查后似乎根本无法使用。另外，另一个技巧是使每个角图像的内部透明，以免阻塞角附近的文本。外部一定不能透明，这样才能覆盖非圆形div的边框。

而且，一旦CSS3广泛地受到边界半径的支持，这将成为制作圆角的官方最佳方法。

Opera还不支持边界半径(显然它将在版本10之后的版本中)。同时，您可以使用CSS设置SVG背景来创建类似的效果。

圆角跨浏览器属性浏览器