CSS3 - 圓形按鈕 - 圓邊（水平和垂直）

有沒有辦法只使用CSS創建這個按鈕，無需使用附加作爲背景圖像。我試着玩邊界半徑，但無法做到這一點。

2016-01-24 Isaac Hili

您可以使用[這裏]（http://stackoverflow.com/questions/29966499/border-radius-in-即百分比和像素-PX）即，邊界半徑聲明的東西像'border-radius：20px/30px; – jbutler483

管理完全按照我想要的方式使用SVG，我不確定這是否是正確的方法。 https://jsfiddle.net/axmgbL03/ –

SVG很好用。 –

最近我可以給你是這樣的....爲410px的寬度和高度294px..the實際圖像遠遠大於這個片段的窗口大...好運氣

div{ 
 
    width:410px; 
 
    height:294px; 
 
    background:#ed1e79; 
 
    border-radius:45%; 
 
}

<div></div>

來源

2016-01-24 22:49:15 repzero

-1

你必須與物業邊界半徑的發揮，因此，例如，這將是

#your-button { 
    background-color: some-color; 
    border-radius: some-percentage; 
}

看

this

來源

2016-01-24 22:13:14

不僅有你聯繫w3schools，你也沒有解決實際問題。 – jbutler483

鏈接到w3school有什麼問題嗎？我問，所以我不會犯同樣的錯誤。 –

我猜這是第一次看到[this]（http://www.w3fools.com/） – jbutler483

.ellipseDiv { 
 
    height: 50px; 
 
    width: 100px; 
 
    border: 2px solid #005; 
 
    border-radius: 50px/25px; 
 
    background-color: #EE5D20; 
 
}

<div class="ellipseDiv"></div>

這應該讓你你想。

這個例子是用div做的，但是用按鈕就可以輕鬆完成！

來源

2016-01-24 22:13:27

@ jbutler483：使用這個不錯的建議！ –

是的，這是可能的。

這裏是你如何做到這一點：

.pinkbutton { 
 
    border-radius: 240px/120px; 
 
    background-color: #ed1e79; 
 
    width : 175.2px; 
 
    height : 126.6px; 
 
}

<div class="pinkbutton"></div>

來源

2016-01-24 22:50:12

CSS3 - 圓形按鈕 - 圓邊（水平和垂直）

回答

相關問題