实现边框圆角
-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//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background-color: #fff;
font: normal 11pt Trebuchet MS,Arial,sans-serif;
}
.box1 {
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 50px auto;
padding: 20px;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 10px;
}
.box2 {
background: transparent url(ashera.jpg); no-repeat top left;
width: 420px;
height: 220px;
margin: 0 auto 35px auto;
padding: 30px;
color: #fff;
font-weight: bold;
border: 11px solid #35b70e;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);
}
.box3 {
background-color: #ddd;
width: 210px;
height: 30px;
padding: 20px;
position: absolute;
top: 5px; left: 5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior: url(border-radius.htc);
}
.rel {
margin: 50px 0 0 33px;
padding: 25px;
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */
}
</style>
</head>
<body>
<p>Not just divs, but any element*</p>
<div class="rel">
<div class="box1">
11 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
</div>
<div class="box2">
22 this cat is a hybrid of domestic and wild breeds :)
</div>
<div class="box3">
33 this box is absolutely positioned
</div>
</div>
</body>
</html>
分享到：
相关推荐
CSS3 中的 border-radius 属性可以生成圆角边框，无需使用图片背景图案，从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...
让IE实现CSS3中的border-radius（圆角）
在IT行业中，CSS3是 Cascading Style Sheets 的第三版本，带来了许多令人兴奋的新特性，其中包括 `border-radius`，它使得我们可以轻松地为HTML元素添加圆角效果，无需使用图像或复杂的CSS技巧。然而，这个特性在...
在CSS世界中，`border-radius`属性是一个非常重要的特性，它允许我们为元素添加圆角效果，从而使得设计更加精致和现代。然而，在实际开发中，我们可能会遇到`border-radius`失效的问题，导致元素的边角无法按照预期...
在CSS3中，`border-radius`属性是一个非常重要的特性，它允许我们为元素的边框创建圆角效果，使得设计更加美观和现代化。这个特性在网页设计中被广泛应用，可以替代传统的图片切角方法，提高网页加载速度并优化用户...
前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法;在CSS2中，大家都碰到过圆角的制作,如今CSS3中的border-radius出现后，让我们没有那么多的烦恼了
在CSS3中，border-radius、box-shadow和gradient是三个非常重要的样式属性，它们极大地提升了网页设计的美观性和表现力。让我们逐一深入探讨这三个概念。 首先，`border-radius`属性允许我们为元素的边框添加圆角，...
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着，除去Internet Explorer 8及更低版本，所有的浏览器可以显示圆角。为了使样式能正确应用，需要为Webkit和Mozilla内核添加前缀。 CSS ...
`border-radius`属性是CSS3中的一项重要特性，它允许开发者为元素的边框添加圆角，无需再依赖图像来实现这一效果。在现代浏览器中，如Chrome、Firefox、Safari、Opera以及更新版本的IE，`border-radius`的兼容性已经...
在CSS3中，`border-radius`属性是一个非常重要的特性，它允许我们为元素的边框添加圆角，使得设计更加丰富和美观。然而，这个特性在早期版本的Internet Explorer（尤其是IE7和IE8）中并不支持。为了解决这个问题，...
### 圆角魅力：CSS `border-radius`全攻略 在当今网页设计中，圆角（border-radius）的应用已经成为提升用户体验及界面美观度的关键技术之一。它不仅赋予了用户界面更加柔和且现代的感觉，而且还能帮助设计师们实现...
"border-radius"是CSS3中的一个关键特性，它允许我们为元素的边框添加圆角，使得原本方形的边框变得柔和，提升网页设计的美观度。在现代浏览器中，如Chrome、Firefox、Safari和Edge等，直接使用`border-radius`属性...
CSS中的`border-radius`属性是CSS3引入的一个强大的特性，用于创建圆角边框效果，使得元素的四个角可以平滑地过渡到边框边缘，而不是直角显示。这一属性在现代浏览器中得到了广泛支持，但早期版本的浏览器，如...
此外，示例代码还使用了浏览器特定的渐变背景（如`-moz-linear-gradient`，`-webkit-linear-gradient`和`-ms-linear-gradient`），这是CSS3的另一个特性，用于在不同浏览器中实现兼容的背景渐变效果。 总结起来，...
在CSS世界中，`border-radius`属性用于为元素添加圆角效果，使边框不再呈现为直角，而是呈现出各种半径的弧形。然而，有时候我们可能会遇到`border-radius`失效的问题，导致元素的边角无法按照预期显示为圆形或椭圆...
本篇将详细探讨如何实现IE浏览器对CSS3圆角`border-radius`以及`box-shadow`和`text-shadow`的支持。 首先，`border-radius`属性是CSS3引入的新特性，允许我们为元素的边框创建圆角，而非传统的直角。然而，IE8及...
实现边框圆角 -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//...
首先，我们需要了解CSS3中的`border-radius`属性。这个属性允许我们为元素的边框设置圆角，从而摆脱了以往必须使用图片或者复杂的内嵌HTML结构来创建圆角的限制。例如，如果你想让一个元素的四个角都变为半径为10...