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 - 圆形按钮 - 圆边（水平和垂直）

回答

相关问题