#### **2017-11-30 22：13** #### **author：yang** ### **border-radius:50%的圆角边框** HTML代码： ~~~ <div class="content"> <span>圆角边框</span> </div> ~~~ csss代码： ~~~ <style type="text/css"> .content { width: 80px; height: 30px; margin: 50px auto; text-align: center; border: 1px solid #fff; background: #fedc46; border-radius: 15px; } .content span{ font-size: 12px; color: #fff; text-align: center; margin-top: 8px; } </style> ~~~ 下边是使边框的左上角变成圆角，右下角也变成圆角。 就改变了css代码中的border-radius的属性值： ~~~ border-top-left-radius: 15px; border-bottom-right-radius: 15px; ~~~