html边框圆角化可以用css中的“border-radius”属性来实现。
1、新建html文档，在body标签中添加一个div标签，然后为这个div标签设置边框，这时默认情况下边框是直角：
2、为div标签设置“border-radius”属性，属性值为圆角半径大小，这时边框的四个顶角都会变成圆角：
3、为div标签设置“border-radius”属性，属性值分别对应边框的左上角、右上角、右下角和左下角，这时可以对每个顶角自定义设置圆角半径：
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/htmlcharset=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条）