个人认为最完美的css处理div圆角的方法

最新推荐文章于 2022-02-11 13:46:30 发布

原创最新推荐文章于 2022-02-11 13:46:30 发布 · 8.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#div #css #class #border #xhtml #html

本文介绍了一种改进的CSS圆角实现方法，该方法通过简单的HTML结构和内联样式生成圆角矩形和圆角边框，易于使用且便于维护。

本着依简单易用，易维护为原则！改进了原有的css圆角代码！

可以生成，圆角矩形和圆角边框！

具体使用方法！见代码！

圆角边框只要把div的class定义成roundeside

圆角矩形只要把div的class定义成roundedcorner

然后在文档的最后，（记住一定要是最后）引用最后一段js代码即可为了方便发表所以把这些代码放到一个文件里面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>curvyCorners Demo</title> <mce:style></mce:style><style mce_bogus="1">html,body{ height: 100%; text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; background-color: #ccc; } /*下面是圆角矩形的css样式*/ div.roundedcorner { width: 200px; color:white;border: 2px solid #fff; } div.roundedcorner .r {display:block;background: #fff} div.roundedcorner .r b {display:block;height: 1px;overflow: hidden; } div.roundedcorner .r b{} div.roundedcorner .r .r1{margin: 0 5px} div.roundedcorner .r .r2{margin: 0 3px} div.roundedcorner .r .r3{margin: 0 2px} div.roundedcorner .r .r4{margin: 0 1px} div.roundeside .border{} /*#3a6ea5为背景色，可修改成自己想要的颜色*/ div.roundedcorner , div.roundedcorner .r b {background:#3a6ea5; } /*下面是圆角边框的css样式*/ div.roundeside{ width: 200px; } div.roundeside .r {display:block;background: transparent;} div.roundeside .r b {height: 1px;overflow: hidden;display:block; } div.roundeside .r .r1{margin: 0 4px;} div.roundeside .r .r2{margin: 0 3px;background: transparent;} div.roundeside .r .r3{margin: 0 2px;background: transparent;} div.roundeside .r .r4{margin: 0 1px;background: transparent;} /*#3a6ea5为边框色，可修改成自己想要的颜色*/ div.roundeside .border,div.roundeside .r b{border-left: 1px solid #3a6ea5;border-right: 1px solid #3a6ea5;} div.roundeside .r .r1{background: #3a6ea5;}</style> <div class="roundedcorner" ><div >样式1</div><div style="border: 3px solid #3a6ea5;background: #fff;color:#000" mce_style="border: 3px solid #3a6ea5;background: #fff;color:#000">具体内容<br/>wefwea</div></div> <br/> <div class="roundedcorner" id=round1><div style="padding: 3px" mce_style="padding: 3px">样式1</div></div> <br/> <div class="roundedcorner" id=round1><div style="padding: 3px" mce_style="padding: 3px">样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/></div></div> <br/> <div class="roundeside" id=round1><div>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/></div></div> <br/> <div class="roundeside" id=round1><div>样式1</div></div> <mce:script type="text/javascript"></mce:script> </body> </html>