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

最新推荐文章于 2022-01-25 10:22:31 发布

走错路的程序员

最新推荐文章于 2022-01-25 10:22:31 发布

阅读量8.3k

点赞数 4

文章标签： div css class border xhtml html

本文链接：https://blog.csdn.net/phker/article/details/4751248

版权

本着依简单易用，易维护为原则！改进了原有的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>

走错路的程序员

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
个人认为最完美的css处理div圆角的方法

本着依简单易用，易维护为原则！改进了原有的css圆角代码！可以生成，圆角矩形和圆角边框！具体使用方法！见代码！圆角边框只要把div的class定义成roundeside圆角矩形只要把div的class定义成roundedcorner然后在文档的最后，（记住一定要是最后）引用最后一段js代码即可为了方便发表所以把这些代码放到一个文件里面 curvyCor
复制链接

扫一扫