css 盒子边角内圆

CSS盒子边角内的圆形可以通过border-radius属性来实现。该属性可以设置盒子的边角为圆形。在给定的CSS代码中，我们可以看到两个案例。
第一个案例是实现一个正圆形的盒子。为了实现这个效果，我们设置盒子的宽度和高度都为200px，并将border-radius属性设置为50%。这样，盒子的边角就会自动调整为圆形。
第二个案例是实现一个胶囊按钮形状的盒子。为了实现这个效果，我们设置盒子的宽度为300px，高度为100px，并将border-radius属性设置为30px。通过这样的设置，盒子的左上角和右上角以及左下角和右下角的边角会自动合并成圆角，而中间的边角则保持直角。这样就实现了胶囊按钮的形状。
总结来说，通过使用border-radius属性，我们可以轻松地实现盒子边角内的圆形效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [【CSS应用篇】——CSS如何实现圆角边框](https://blog.csdn.net/m0_64231944/article/details/127701741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]