无图片CSS圆角

发表评论
1,854℃

A+

<!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>无图片CSS圆角</title>
<style type="text/css">
body {
color: #000;
background: #999;
font-size: 12px;
line-height: 1.5;
margin: 0;
}
.box {
width: 500px;
margin: 30px auto;
}
.box .r1 {
height: 1px;
overflow: hidden;
margin: 0 5px;
background: #f60;
}
.box .r2 {
height: 1px;
border-left: 2px solid #f60;
border-right: 2px solid #f60;
margin: 0 3px;
background: #ff0;
overflow: hidden;
}
.box .r3 {
height: 1px;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
margin: 0 2px;
background: #ff0;
overflow: hidden;
}
.box .r4 {
height: 2px;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
margin: 0 1px;
background: #ff0;
overflow: hidden;
}
.box .content {
background: #fff;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
padding: 7px 10px;
zoom: 1;
} /*---修改边框颜色---*/
.box .r2, .box .r3, .box .r4, .box .content {
border-color: #2d437b;
}
.box .r1 {
background: #2d437b;
} /*---修改背景颜色---*/
.box .r2, .box .r3, .box .r4, .box .content {
background: #f3fdff;
} /*---修改圆角大小---*/
.box2 {
width: 500px;
margin: 30px auto;
}
.box2 .r1 {
height: 1px;
overflow: hidden;
margin: 0 2px;
background: #f60;
}
.box2 .r2 {
height: 1px;
overflow: hidden;
margin: 0 1px;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
background: #ff0;
}
.box2 .content {
background: #ff0;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
padding: 7px 10px;
zoom: 1;
}
</style>
</head>
<body>
<div class="box2">
<div class="top">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="content">
<p>
这样形成的圆角，是具备多种优势的：<br /> 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。)<br /> 2. 没有hack，且不易出现浏览器兼容性问题。<br /> 3. 圆角颜色易自定义。<br /> 4. 圆角大小可自定义。(试着将class="box"的修改为class="box2"。)<br /> 5. 圆角模式易自定义。<br /> 6. 可以存在于任意背景中。(试着修改body的background。)<br /> 7. html结构清晰。
</p>
</div>
<div class="bottom">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无图片CSS圆角</title>

body {

color: #000;

background: #999;

font-size: 12px;

line-height: 1.5;

margin: 0;

}

.box {

width: 500px;

margin: 30px auto;

}

.box .r1 {

height: 1px;

overflow: hidden;

margin: 0 5px;

background: #f60;

}

.box .r2 {

height: 1px;

border-left: 2px solid #f60;

border-right: 2px solid #f60;

margin: 0 3px;

background: #ff0;

overflow: hidden;

}

.box .r3 {

height: 1px;

border-left: 1px solid #f60;

border-right: 1px solid #f60;

margin: 0 2px;

background: #ff0;

overflow: hidden;

}

.box .r4 {

height: 2px;

border-left: 1px solid #f60;

border-right: 1px solid #f60;

margin: 0 1px;

background: #ff0;

overflow: hidden;

}

.box .content {

background: #fff;

border-left: 1px solid #f60;

border-right: 1px solid #f60;

padding: 7px 10px;

zoom: 1;

} /*---修改边框颜色---*/

.box .r2, .box .r3, .box .r4, .box .content {

border-color: #2d437b;

}

.box .r1 {

background: #2d437b;

} /*---修改背景颜色---*/

.box .r2, .box .r3, .box .r4, .box .content {

background: #f3fdff;

} /*---修改圆角大小---*/

.box2 {

width: 500px;

margin: 30px auto;

}

.box2 .r1 {

height: 1px;

overflow: hidden;

margin: 0 2px;

background: #f60;

}

.box2 .r2 {

height: 1px;

overflow: hidden;

margin: 0 1px;

border-left: 1px solid #f60;

border-right: 1px solid #f60;

background: #ff0;

}

.box2 .content {

background: #ff0;

border-left: 1px solid #f60;

border-right: 1px solid #f60;

padding: 7px 10px;

zoom: 1;

}

</style>

</head>

<body>

</div>

<p>

这样形成的圆角，是具备多种优势的：<br /> 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。)<br /> 2. 没有hack，且不易出现浏览器兼容性问题。<br /> 3. 圆角颜色易自定义。<br /> 4. 圆角大小可自定义。(试着将class="box"的修改为class="box2"。)<br /> 5. 圆角模式易自定义。<br /> 6. 可以存在于任意背景中。(试着修改body的background。)<br /> 7. html结构清晰。

</p>

</div>