实现CSS设置div边框演示代码
分类:实例代码
CSS设置div边框演示代码属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它演示了设置各种样式的div边框效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { background: #ccc; } div { border: 8px solid #F60; width: 250px; height: 120px; line-height: 120px; margin: 10px auto; text-align: center; font-family: "微软雅黑"; font-size: 24px; font-style: normal; color: #590; } .div1 { border-radius: 30px; } .div2 { border-top-left-radius: 3em; border-top-right-radius: 3em; } .div3 { border-bottom-left-radius: 6em; border-bottom-right-radius: 6em; } .div4 { border-left-style: dashed; border-right-style: dotted; } .div5 { border-left-style: double; border-right-style: ridge; } .div6 { border-style: groove; } .div7 { border-style: inset; } .div8 { border-style: outset; } .div9 { border-width: 8px; border-radius: 30px; width: 1000px; height: 30px; } </style> </head> <body> <div class='div1'>radius</div> <div class='div2'>部分圆角</div> <div class='div3'>部分圆角</div> <div class='div4'>dashed和dotted</div> <div class='div5'>double和ridge</div> <div class='div6'>groove</div> <div class='div7'>inset</div> <div class='div8'>outset</div> <div class='div9'></div> </body> </html>
上面的代码演示了边框效果,更多内容可以参阅相关阅读。
相关阅读:
(1).border-radius参阅CSS3 border-radius一章节。
CSS设置div边框演示代码,这样的场景在实际项目中还是用的比较多的,关于CSS设置div边框演示代码就介绍到这了。