<div>方形框</div> <div class="rounded">圆角形框</div> <div class="asymmetric-radius">椭圆边形框</div> <div class="asymmetric-corners">半圆形框</div> <div class="percentages">圆形框</div> <div class="sub-properties">单圆角形框</div> <div class="brackets">小括号形框</div> <div class="brackets"><span class="inner-brackets">双小括号形框</span></div> <div class="squarebrackets">中括号形框</div> <style> div { width:150px; /* you can add backround style by yourself */ height: 150px; margin: 10px; float: left; text-align:center; line-height:150px; font-size: 24px; color:#FF7B3A;font-family:Microsoft JhengHei; border: 10px solid #F54; } /* Specify the readius for all corners. */ .rounded { border-radius: 30px; } /* You can use assymetric radius. Just provide horizontal / vertical. */ .asymmetric-radius { border-radius: 30px / 90px; } /* You can specify a distinct radius by corner. */ .asymmetric-corners { border-radius: 90px 60px 30px 5px; } /* You can use percentages... Hey! It's a circle! */ .percentages { border-radius: 50%; } /* And you can provide them with sub properties. */ .sub-properties { border-top-left-radius: 10px; /* Note there is no / symbol here! */ border-bottom-right-radius: 80px 40px; } /* border-radius is not only used for rounding corners. */ .brackets { border-top: none; border-bottom: none; border-radius: 30px / 90px; } .inner-brackets { border-top: none; border-bottom: none; border-radius: 20px / 70px; } span{ width:120px; height: 130px; margin: 7px; float: left; border: 8px solid #F54; font-size: 18px; color:#FF7B3A;font-family:Microsoft JhengHei; } .squarebrackets { border: none; position: relative; width: 150px; height: 150px; padding: 0; margin: 1em; } .squarebrackets:before, .squarebrackets:after{ content: ''; display: block; height: 100%; width: 15px; border: 8px solid #F54; position: absolute; top: -5px; } .squarebrackets:before{ left: 0; border-right: 0; } .squarebrackets:after{ right: 0; border-left: 0; } </style>

(www.xuejiqiao.com)提示：可修改后再运行代码!