div+css实现圆角即网页上常用的圆角效果
导读：收集整理的这篇文章主要介绍了div+css实现圆角即网页上常用的圆角效果，觉得挺不错的，现在分享给大家，也给大家做个参考。 下面是整个页面的源码，复制->粘贴->保存成htML文档->可见效果： 复制代码代码如下...
收集整理的这篇文章主要介绍了div+css实现圆角即网页上常用的圆角效果，觉得挺不错的，现在分享给大家，也给大家做个参考。 下面是整个页面的源码，复制->
粘贴->
保存成htML文档->
可见效果： 复制代码代码如下:
strong> /strong> !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=utf-8" />
title> CSS+DIV圆角/title>
style type="text/css">
#divcss5 { background: transparent; margin:1em; }
/*圆角样式 */
.xtop, .xbottom { display:block; background:transparent; font-Size:1px; }
.xb1, .xb2, .xb3, .xb4 { display:block; overflow:hidden; }
.xb1, .xb2, .xb3 { height:1px; }
.xb2, .xb3, .xb4 { background:#fcC; border-left:1px solid #F69; border-right:1px solid #F69; }
.xb1 { margin:0 5px; background:#F69; }
.xb2 { margin:0 3px; border-width:0 2px; }
.xb3 { margin:0 2px; }
.xb4 { height:2px; margin:0 1px; }
.xboxcontent { display:block; background: #FCC; border:0 solid #F69; border-width:0 1px; }
/*圆角样式 */
/style>
/head>
body>
div id="divcss5">
b class="xtop"> b class="xb1"> /b> b class="xb2"> /b> b class="xb3"> /b> b class="xb4"> /b> /b>
div class="xboxcontent" align="center" style="color:#FF0">
b> div + css圆角，无需图片/b>
/div>
b class="xbottom"> b class="xb4"> /b> b class="xb3"> /b> b class="xb2"> /b> b class="xb1"> /b> /b>
/div>
/body>
/html>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： div+css实现圆角即网页上常用的圆角效果
本文地址： https://pptw.com/jishu/584906.html