CSS Border Rounded

一、屬性介紹

CSS Border Rounded屬性，指的是通過添加border-radius屬性來為元素邊框添加圓角效果。border-radius可以控制邊框的圓角大小，可以使用具體像素值，也可以使用百分比，甚至可以使用em、ex作為單位。

以下是設置了圓角效果的CSS屬性：

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

分別控制元素四個角的圓角大小。如果我們想要一個元素四個角的圓角大小相同，只需要設置border-radius屬性即可。

border-radius: 20px;

二、簡單示例

下面是一個簡單的示例，我們給一個div元素添加了圓角效果。

<div style="width:200px;height:100px;border:2px solid red;border-radius:25px;">
  <p>這是一個例子</p>
</div>

該div元素的寬為200px，高為100px，邊框為2px的紅色實線邊框，圓角半徑為25px。

三、多種圓角樣式

在設置邊框的圓角大小時，不僅僅只能設置一個具體數值，還可以設置多個數值，用/分隔，每個數值用空格隔開。

以下是示例代碼：

border-radius: 20px 10px 30px 40px / 10px 30px 20px 40px;

這行代碼設置了一個複合的border-radius值。值的順序是順時針排列的，從左上角開始。第一個數值指的是左上角的水平半徑，第二個數值指的是左上角的垂直半徑，以此類推。

四、橢圓形圓角

除了可以設置具體像素值之外，border-radius屬性還可以使用百分比來設置圓角大小。如果上下左右四個角的半徑是相等的，可以這樣寫：

border-radius: 50%;

這樣可以得到一個正圓形的圓角效果，但如果四個角的半徑不相等時，就會變成橢圓形。

以下是示例代碼：

<div style="width:200px;height:100px;border:2px solid red;border-radius:50%;background-color:grey;">
  <p>這是一個例子</p>
</div>

五、不同背景色的圓角效果

我們可以在一個元素中設置多個背景色，比如使用線性漸變或徑向漸變的背景。但這樣會導致圓角效果失效。為了解決這個問題，我們可以使用偽元素:before和:after，再用盒模型的基本樣式將其隱藏起來，並為這兩個偽元素添加樣式。

以下是示例代碼:

<style>
  #rounded {
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, red , orange);
  }
  #rounded:before, #rounded:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(to right, red , orange);
    z-index: -1;
  }
  #rounded:before {
    transform: rotate(45deg);
    top: -35%;
    left: -15%;
  }
  #rounded:after {
    transform: rotate(45deg);
    bottom: -35%;
    right: -15%;
  }
</style>

<div id="rounded">
  <p>這是一個例子</p>
</div>

上述代碼中，我們將元素溢出的部分剪裁掉，再添加兩個偽元素，使用border-radius屬性來設置圓角大小，然後將它們旋轉45度並分別放到元素的頂部左側和底部右側。這樣就可以得到不同背景色的圓角效果。

六、總結

CSS Border Rounded屬性可以為元素的邊框添加圓角效果。可以設置四個角的半徑大小，也可以使用複合值進行設置。此外還可以使用百分比來設置圓角大小，並且可以實現不同背景色的圓角效果。