展开全部
Div切圆角的实现原理：
1，首先使用P标签，第一行距Div的边距为一个数值（假设为3px;）；
2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px;）；
3，依次实现，直到最后一个p标签的值为1px；
4，第一行全显示，后面的只显示两头的一个像素即可。
5，再配合中间的DIV显示两头的线框，即可实现
实现代码：
<!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=gb2312" />
<title>Div圆角实现</title>
<style type="text/css">
.one
{
display:block;
overflow:hidden;
height:1px;
margin:0 4px;
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
background:#B2D0EA;
}
.two
{
display:block;
overflow:hidden;
height:1px;/*线的高度为1px*/
margin:0 3px;/*距离外层DIV的左右边距各3px*/
border-left:1px solid #B2D0EA;/*只显示线的左边的1px*/
border-right:1px solid #B2D0EA;/*只显示线的右边的1px*/
background:#B2D0EA;/*配合内层Div的颜色变化，*/
}
.three
{
display:block;
overflow:hidden;
height:1px;
margin:0 2px;
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
background:#EDF7FF;
}
.four
{
display:block;
overflow:hidden;
height:1px;
margin:0 1px;
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
background:#EDF7FF;
}
.rou/*DIV只显示左右的边框，颜色和p标签的一致*/
{
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
}
.rou2
{
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
background:#EDF7FF;
}
</style>
<!--Div切圆角的实现原理：
1，首先使用P标签，第一行距Div的边距为一个数值（假设为3px;）；
2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px;）；
3，依次实现，直到最后一个p标签的值为1px；
4，第一行全显示，后面的只显示两头的一个像素即可。
5，再配合中间的DIV显示两头的线框，即可实现
-->
</head>
<body>
<div>
<!--<p class="one"></p>-->
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>
<div class="rou2">
标题栏
</div>
<div class="rou">
内容页！
</div>
<p class="four"></p>
<p class="three"></p>
<p class="two"></p>
<!--<p class="one"></p>-->
</div>
</body>
</html>
1，首先使用P标签，第一行距Div的边距为一个数值（假设为3px;）；
2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px;）；
3，依次实现，直到最后一个p标签的值为1px；
4，第一行全显示，后面的只显示两头的一个像素即可。
5，再配合中间的DIV显示两头的线框，即可实现
实现代码：
<!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=gb2312" />
<title>Div圆角实现</title>
<style type="text/css">
.one
{
display:block;
overflow:hidden;
height:1px;
margin:0 4px;
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
background:#B2D0EA;
}
.two
{
display:block;
overflow:hidden;
height:1px;/*线的高度为1px*/
margin:0 3px;/*距离外层DIV的左右边距各3px*/
border-left:1px solid #B2D0EA;/*只显示线的左边的1px*/
border-right:1px solid #B2D0EA;/*只显示线的右边的1px*/
background:#B2D0EA;/*配合内层Div的颜色变化，*/
}
.three
{
display:block;
overflow:hidden;
height:1px;
margin:0 2px;
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
background:#EDF7FF;
}
.four
{
display:block;
overflow:hidden;
height:1px;
margin:0 1px;
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
background:#EDF7FF;
}
.rou/*DIV只显示左右的边框，颜色和p标签的一致*/
{
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
}
.rou2
{
border-left:1px solid #B2D0EA;
border-right:1px solid #B2D0EA;
background:#EDF7FF;
}
</style>
<!--Div切圆角的实现原理：
1，首先使用P标签，第一行距Div的边距为一个数值（假设为3px;）；
2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px;）；
3，依次实现，直到最后一个p标签的值为1px；
4，第一行全显示，后面的只显示两头的一个像素即可。
5，再配合中间的DIV显示两头的线框，即可实现
-->
</head>
<body>
<div>
<!--<p class="one"></p>-->
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>
<div class="rou2">
标题栏
</div>
<div class="rou">
内容页！
</div>
<p class="four"></p>
<p class="three"></p>
<p class="two"></p>
<!--<p class="one"></p>-->
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
HTML5的CSS是可以 但是现在IE6 7 8在中国还是很普及的不支持圆角DIV 不过目前可以用DIV嵌套圆角图片来实现 自己花好需要的圆角
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一般是使用css语句： border-radius
例如：border-radius:10px，这样就现实10个像素弧度的圆角。
注意ie6，ie7，和ie8不支持这个语句，只有ie9，firefox，chrome，safari 这里浏览器支持。
ie6，ie7，和ie8下的圆角一般使用js脚步实现，例如：jquery.corner.js
例如：border-radius:10px，这样就现实10个像素弧度的圆角。
注意ie6，ie7，和ie8不支持这个语句，只有ie9，firefox，chrome，safari 这里浏览器支持。
ie6，ie7，和ie8下的圆角一般使用js脚步实现，例如：jquery.corner.js
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
