纯DIV+CSS实现圆角代码-侯体宗的博客

纯DIV+CSS实现圆角代码
前端 / 管理员发布于 8年前 277

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>  </head><body> <div>  <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>  </div> </body> </html>
提示：您可以先修改部分代码再运行

上一条：
Perl eval函数使用实例
下一条：
css 控制first-letter伪类的背景

0条评论 (评论内容有缓存机制,请悉知!)

最新最热

相关文章
使用 Alpine.js 排序插件对元素进行排序(0个评论)
在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
使用mock-server实现模拟接口对接流程步骤(0个评论)
vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)

近期文章
opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus(0个评论)
Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用(0个评论)
Apifox桌面端被曝遭供应链投毒：CDN 脚本被篡改，窃取 SSH 密钥与 Git 凭证(0个评论)
在go语言中实现字符串可逆性压缩及解压缩功能(0个评论)
使用go + gin + jwt + qrcode实现网站生成登录二维码在app中扫码登录功能(0个评论)
在windows10中升级go版本至1.24后LiteIDE的Ctrl+左击无法跳转问题解决方案(0个评论)
智能合约Solidity学习CryptoZombie第四课:僵尸作战系统(0个评论)
智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)

近期评论
test1 在
opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus中评论 test..
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人..
Zita 在
Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用中评论 111222..
123 在
Clash for Windows作者删库跑路了，github已404中评论按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分..
原梓番博客在
在Laravel框架中使用模型Model分表最简单的方法中评论好久好久都没看友情链接申请了，今天刚看，已经添加。..

Top