div用CSS设定圆角的话，只有一个属性border-radius，但是该属性IE8都不能支持，只能在firefox、chorme等浏览器中看到。如果想在IE8或以下的浏览器中看到，只能找js代码实现。
有人写过专门的做圆角用的js代码，你可以搜搜看，印象中做成了corner函数，直接调用即可。
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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）