<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { width: 300px; } b { display: block; } .b1, .b2, .b3, .b4 { overflow: hidden; height: 1px; border-left: 1px solid #000; border-right: 1px solid #000; } .b1 { margin: 0 5px; background: #000; } .b2 { margin: 0 3px; border-width: 0 2px; } .b3 { margin: 0 2px; } .b4 { height: 2px; margin: 0 1px; } #content { border: solid #000; border-width: 0 1px; height: 100px; } </style> </head> <body> <div id="box"> <b class="top"> <b class="b1"></b> <b class="b2"></b> <b class="b3"></b> <b class="b4"></b> </b> <div id="content">内容区</div> <b class="bottom"> <b class="b4"></b> <b class="b3"></b> <b class="b2"></b> <b class="b1"></b> </b> </div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #nifty { width: 300px; } #con { height: 100px; } #nifty, .rtop div { background: #9bd1fa; } .rtop { background: #fff; } .rtop div { height: 1px; overflow: hidden; } .r1 { margin: 0 5px; } .r2 { margin: 0 3px; } .r3 { margin: 0 2px; } .r4 { margin: 0 1px; height: 2px; } </style> </head> <body> <div id="nifty"> <div class="rtop"> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> <div class="r4"></div> </div> <div id="con"></div> <div class="rtop"> <div class="r4"></div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 400px; margin: 20px auto; } h1 { font-size: 2em; color: #fff; padding: 20px; text-align: center; } b { display: block; overflow: hidden; height: 1px; background: #96C2F1; border-width: 0 1px; border-style: solid; } .b1 { margin: 0 5px; background: #fff; border: none; } .b2 { border-right: #eee; } .b3 { border-right: #ddd; } .b4 { border-right: #aaa; } .b4b { border-left: #eee; } .b3b { border-left: #ddd; } .b2b { border-left: #aaa; } .b2, .b3, .b4 { border-left-color: #fff; } .b4b, .b3b, .b2b { border-right-color: #999; } .b2, .b2b { margin: 0 3px; border-width: 0 2px; } .b3, .b3b { margin: 0 2px; } .b4, .b4b { height: 2px; margin: 0 1px; } .b1b { margin: 0 5px; background: #999; border: none; } .content { background: #96C2F1; border-left: 1px solid #fff; border-right: 1px solid #999; } </style> </head> <body> <div class="box"> <b class="b1"></b> <b class="b2"></b> <b class="b3"></b> <b class="b4"></b> <div class="content"> <h1>3D效果CSS圆角</h1> </div> <b class="b4b"></b> <b class="b3b"></b> <b class="b2b"></b> <b class="b1b"></b> </div> </body> </html>
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style> body, img, b { margin: 0; padding: 0; } img { border: none; } .radius { display: inline-block; position: relative; overflow: hidden; } .radius b { position: absolute; top: 0; left: 0; background: url(radius.png) no-repeat; } .radius-77 { width: 77px; height: 77px; } .radius-77 img { -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .radius-77 b { width: 77px; height: 77px; background-position: 0 0; } .radius-16 { width: 16px; height: 16px; } .radius-16 img { -ms-border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .radius-16 b { width: 16px; height: 16px; background-position: 0 -78px; } </style> </head> <body> <span class="radius radius-77"> <img src="http://pic.29293.com/pic/5414639382564497756.jpg" width="77" height="77" alt=""> <!--[if lte IE 8]><b></b><![endif]--> </span> <span class="radius radius-16"> <img src="http://pic.29293.com/pic/5414639382564497756.jpg" width="16" height="16" alt=""> <!--[if lte IE 8]><b></b><![endif]--> </span> </body> </html>