在css3.0中，又添加了一个新的属性border-radius，使用border-radius这个属性可以实现圆角边框的效果。除IE和遨游外，目前有Firefox ，Safari，Chrome，Opera支持该属性，其Safari，Chrome，Opera是支持最好的，依照了w3c的标准，仅仅使用border-radius，就可以实现效果，无需加入前缀-webkit。而火狐依然需要加上前缀-moz。
即：
Firefox支持border-radius(圆角)：-moz-border-radius:10px;
webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:10px;
Opera支持border-radius(圆角)：border-radius:10px;
IE不支持border-radius(圆角)
效果图：（IE和遨游不支持！）
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圆角效果border-radius</title>
<style type="text/css">
body,div{margin:0;padding:0;}
.border{width:200px;border:10px solid gray;height:20px;
-moz-border-radius:10px;/*仅Firefox支持，实现圆角效果*/
-webkit-border-radius:10px;/*仅Safari,Chrome支持，实现圆角效果*/
-khtml-border-radius:10px;/*仅Safari,Chrome支持，实现圆角效果*/
border-radius:10px;/*仅Opera，Safari,Chrome支持，实现圆角效果*/
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>
再此我们还可以随意指定圆角的位置，上左，上右，下左，下右四个方向。
在firefox、webkit内核的Safari，Chrome和 Opera的具体书写格式如下：
上左效果：
-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius 上左
上右效果：
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius 上右
下左效果：
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius 下左
下右效果：
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius 下右
然后我们可以做些效果：
例如常见的 标题栏 仅仅需要在上面用到圆角效果，如图：
代码 ：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圆角效果border-radius</title>
<style type="text/css">
.border{width:120px;border:15px solid gray;height:20px;
background:gray;color:#fff;
-moz-border-radius-topright:15px;
-moz-border-radius-topleft:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-top-left-radius:15px;
border-top-right-radius:15px;
border-top-left-radius:15px;
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圆角效果border-radius</title>
<style type="text/css">
.border{width:120px;border:15px solid gray;height:20px;
background:gray;color:#fff;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
}
</style>
</head>
<body>
<div class="border">border radius</div>
</body>
</html>
万变不离其宗，仅仅需要改下的border-radius的方向，就可以实现一些很有用的效果，代码变的越来越简单。
分享到：
相关推荐
CSS3 中的 border-radius 属性可以生成圆角边框，无需使用图片背景图案，从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...
2. **边框样式**：某些边框样式如`none`或`hidden`可能会影响`border-radius`，因为没有边框就没有圆角可言。确保你的元素具有可见的边框。 ```css div { border-style: solid; /* 显示实线边框 */ } ``` 3. **...
让IE实现CSS3中的border-radius（圆角）
在CSS3中，`border-radius`属性是一个非常重要的特性，它允许我们为元素的边框添加圆角，使得设计更加丰富和美观。然而，这个特性在早期版本的Internet Explorer（尤其是IE7和IE8）中并不支持。为了解决这个问题，...
"border-radius"是CSS3中的一个关键特性，它允许我们为元素的边框添加圆角，使得原本方形的边框变得柔和，提升网页设计的美观度。在现代浏览器中，如Chrome、Firefox、Safari和Edge等，直接使用`border-radius`属性...
在CSS世界中，`border-radius`属性用于为元素添加圆角效果，使边框不再呈现为直角，而是呈现出各种半径的弧形。然而，有时候我们可能会遇到`border-radius`失效的问题，导致元素的边角无法按照预期显示为圆形或椭圆...
`border-radius`属性是CSS3中的一项重要特性，它允许开发者为元素的边框添加圆角，无需再依赖图像来实现这一效果。在现代浏览器中，如Chrome、Firefox、Safari、Opera以及更新版本的IE，`border-radius`的兼容性已经...
01-边框圆角border-radius.html
### 圆角魅力：CSS `border-radius`全攻略 在当今网页设计中，圆角（border-radius）的应用已经成为提升用户体验及界面美观度的关键技术之一。它不仅赋予了用户界面更加柔和且现代的感觉，而且还能帮助设计师们实现...
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//...
首先，`border-radius`属性允许我们为元素的边框添加圆角，使得原本硬朗的矩形边缘变得柔和。这个属性可以接受一个到四个半径值，分别对应上、右上、右、下右、下、下左、左上和左的八个角。如果只设置两个值，它们...
在CSS3中，`border-radius`属性是一个非常重要的特性，它允许我们为元素的边框创建圆角效果，使得设计更加美观和现代化。这个特性在网页设计中被广泛应用，可以替代传统的图片切角方法，提高网页加载速度并优化用户...
CSS中的`border-radius`属性是CSS3引入的一个强大的特性，用于创建圆角边框效果，使得元素的四个角可以平滑地过渡到边框边缘，而不是直角显示。这一属性在现代浏览器中得到了广泛支持，但早期版本的浏览器，如...
CSS3的border-radius属性是用于实现元素边框圆角的样式声明，它可以在Web开发中快速而简洁地创建圆角效果。border-radius属性能够让我们设置边框的四个角的圆角半径，以改变元素边角的外观。 在使用border-radius...
首先，border-radius属性允许我们设置元素边框的四个角落的半径，从而创建圆形或椭圆形的角。它的语法结构如下： ```css border-radius: top-left top-right bottom-right bottom-left; ``` 每个角落的半径可以...
其中，`text-decoration` 和 `border-radius` 是两种常用的CSS属性，用于设置文本的装饰效果和元素边框的圆角效果。然而，在某些情况下，这两种属性的表现可能与其他CSS属性有所不同，特别是当它们在同一元素上被...
CSS3中的border-radius属性是一个强大的工具，用于为Web元素创建圆角效果。这个属性不仅可以实现简单的圆角矩形，还能创造出各种复杂的弧线边框图形。本文将详细介绍border-radius属性的使用技巧，帮助你更深入地...
总之，CSS3的`border-radius`属性使得创建圆角边框变得简单易行，通过灵活地设置不同角落的半径，我们可以创造出各种形状的圆角元素，提升网页的美观度和用户体验。同时，注意浏览器兼容性和适当的样式调整，能确保...
HTML5 和 CSS3 的引入为网页设计带来了许多新的特性，其中圆角边框的绘制是其中一个重要的美化元素。在 CSS3 中，通过 `border-radius` 属性，我们可以轻松地为元素添加圆角，使得边框不再是传统的直角，而是平滑的...