您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文
纯DIV+CSS实现圆角代码介绍
作者：佚名 责任编辑：admin 更新时间：2022-06-22
我们为大家收集整理了关于纯DIV+CSS实现圆角代码，以方便大家参考。
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" ">
<html xmlns=">
<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>
希望大家可以学会纯DIV+CSS实现圆角代码.想了解更多精彩内容，请关注我们的网站!
相关推荐：
引入CSS样式的方法是什么呢
- 上一个程序编程： 如何实现DIV遮罩层呢
- 下一个程序编程： 引入CSS样式的方法是什么呢
