文章摘自：https://www.cnblogs.com/rain-null/p/6688542.html

css border-radius的用法及自適應的橢圓

我們知道border-radius允許您為元素添加圓角邊框！

而border-radius 屬性是一個簡寫屬性，用于設置四個 border-*-radius 屬性。

如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。

先看個例子。

如果將有個正方形元素設置一個border-radius值為邊長的一半，則可以得到一個圓形。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">width: 200px;height: 200px;border-radius: 100px;background: brown;</pre>

效果圖：

image

這里寬高是固定的且相等，如果寬高不相等則顯示為一個橢圓。

寬高不等效果圖：

image

自適應橢圓

由于根據實際情況出發(fā)，我們希望它能根據實際的內容自動調整并適應。

解決方案：

一個鮮為人知的秘密，border-radius可以單獨設置水平和垂直的半徑，只需要用一個斜杠（/）分隔這二個值就行。此外我們還要知道border-radius不僅可以接受長度值還可以接受百分比值。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">width: 150px;height: 100px;border-radius: 50%/50%; //簡寫屬性：border-radius:50%
background: brown;</pre>

只需這一行簡單的代碼就可以完成自適應的橢圓了。很神奇吧。

半橢圓

我們知道border-radius是個簡寫屬性，它得展開式：

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-botom-left-radius

這四個字如上的順序，從左上角開始順時針應用到元素其他三個角上。

但是真正簡介的寫法還是使用border-radius這個簡寫屬性，只需對應上面的規(guī)則，用空格分開多個值，也能達到展開式的效果。

如果只提供了三個值：1 2 3 則第4個值和第2個值相同。如果只提供了二個值：1 2 則1 3相同，2 4值相同。

我們甚至可以為四個角設置不同的水平和垂直半徑，方法就是在斜杠前指定一到四個值，斜杠后指定一到四個值。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> width: 150px;height: 100px;border-radius: 50%/0 0 100% 100%;background: brown;</pre>

image

變換一下：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> width: 150px;height: 100px;border-radius: 50%/100% 100% 0 0;background: brown;</pre>

image

來一個小紅帽：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> width: 150px;height: 100px;border-radius: 50%/50% 50% 0 0;background: brown;</pre>

image

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> width: 150px;height: 100px;border-radius: 100% 0 0 100%/ 50%;background: brown;//沿著縱軸切開的橢圓</pre>

image

同理，可以得出：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> width: 150px;height: 100px;border-radius: 0 100% 100% 0/ 50%;background: brown;</pre>

image

四分之一的橢圓

那么，有辦法得到四分之一橢圓呢？我們從效果圖看出，創(chuàng)建一個四分之一的橢圓，只要一個角的水平和垂直半徑值都需要是100%，

而其他三個角都不能設圓角。因為四個角的水平和垂直半徑方向上是相同的，所以不需要用斜杠語法了。

所以

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> width: 150px;height: 100px;border-radius:0 0 100% 0;background: brown;</pre>

效果如下：

image