一、簡介
CSS 圓角盒子指的是元素的四個角設置成圓角的形式展現，其效果可以用於美化頁面中的各種元素，例如邊框、按鈕等。CSS 圓角盒子的實現方法很簡單，只需要在 CSS 中添加 border-radius 屬性即可。
二、使用方法
border-radius 屬性可以設置一個或多個圓角半徑的值，其基本語法如下：
border-radius: value; border-radius: top-left top-right bottom-right bottom-left; border-radius: top-left / top-right bottom-right / bottom-left;
其中，value 為圓角半徑的值，可以是像素值、百分比或常用的 length 單位，例如：
border-radius: 20px; border-radius: 30%; border-radius: 2em;
同時，border-radius 屬性還可以設置圓角的位置，具體語法如下：
border-radius: top-left top-right bottom-right bottom-left; border-radius: top-left / top-right bottom-right / bottom-left;
其中，top-left、top-right、bottom-right、bottom-left 分別表示左上角、右上角、右下角、左下角。通過這些屬性，可以設置不同位置的圓角半徑，達到更多變化的效果。
三、實例展示：
下面，我們將通過一些實例來展示 CSS 圓角盒子的效果：
1. 圓角邊框
下面是一個圓角邊框樣式的示例：
<div style="background-color: #ddd; border-radius: 10px; padding: 20px;">
<p>這是一個圓角邊框樣式。</p>
</div>
這是一個圓角邊框樣式。
原創文章，作者：ZOTT，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/137571.html
微信掃一掃 
支付寶掃一掃 