纯DIV+CSS实现圆角效果并不是很难

发布时间：2018-08-22 16:41:34 所属栏目：Unix 来源：站长网

导读：纯DIV+CSS实现圆角效果，在以前的文章中，烈火小编曾经多次提到这一功能，例如：《纯CSS圆角框2:透明圆角化背景图片》、《纯CSS圆角框:基本的圆角框》、《无需图片纯CSS设计Table圆角效果》等等，更多请见这里。今天再来给大家发布一个圆角的效果，代码中

纯DIV+CSS实现圆角效果，在以前的文章中，烈火小编曾经多次提到这一功能，例如：《纯CSS圆角框2:透明圆角化背景图片》、《纯CSS圆角框:基本的圆角框》、《无需图片纯CSS设计Table圆角效果》等等，更多请见这里。今天再来给大家发布一个圆角的效果，代码中有详细说明，就不再多说了

我们来看显示效果：

<!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=GBK" /> <title>Div圆角实现 - Liehuo.Net</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"> http://www.veryhuo.com </div> <p class="four"></p> <p class="three"></p> <p class="two"></p>  </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

UNIX中用户账户的创建	flex导出excel具体实现
Flex打开新窗口将主窗	Flex4 DataGrid中如何

纯DIV+CSS实现圆角效果 并不是很难

纯DIV+CSS实现圆角效果并不是很难