<!doctype html> <html> <head> <meta charset="utf-8"> <title>outline，box-shadow，border-radius</title> <style> *{ padding: 0; margin: 0; } .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} * html .clearfix{zoom:1;} /* IE6 */ *+html .clearfix{zoom:1;} /* IE7 */ .content{ width: 1000px; margin: 20px auto; } .box1{ float: right; width: 200px; height: 200px; background-color: #3c3c3c; outline: 10px solid #1a8f04; -moz-outline-radius: 6px; /*目前只有火狐支持，且需添加前缀-moz-*/ } .box2 { margin: 50px auto; width: 200px; height: 200px; border-radius: 1px; box-shadow: 0 0 0 30px #cd0000; background-color: #3e8f3e; } .box3{ width: 60px; height: 60px; border: 60px solid #3e8f3e; outline: 60px dotted #fff; outline-offset: -60px; background: #ccc; } </style> </head> <body> <div class="content clearfix"> <div class="box1" style="margin-top: 0"> </div> <div class="box1" style="margin-top: 20px"> </div> <div class="box1" style="margin-top: 40px"> </div> </div> <div class="box2"> </div> <div class="box3"> </div> </body> </html>