HTML 中的圆角和椭圆形按钮
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5909578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded corner & elliptical shape button in HTML
提问by Eshika
I want to create a HTML button with rounded corner and elliptical shape without image. What is the way to do it?
我想创建一个没有图像的圆角和椭圆形的 HTML 按钮。有什么方法可以做到?
回答by Rich Bradshaw
This makes all sides rounded:
这使得所有边都变圆了:
border-radius:40px;
This makes them elliptical:
这使它们变成椭圆形:
border-radius:40px/24px;
Have a look here to see:
看看这里:
Or with some extra ugly fanciness:
或者有一些额外的丑陋幻想:
回答by ninjagecko
-webkit-border-radius:3em / 1em;
-moz-border-radius:3em / 1em;
border-radius:3em / 1em;
回答by James Smyth
#box-1 {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-border-radius:10px;
}
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
对于 Firefox、Safari/Chrome、Opera 和 IE9,此框应具有圆角。
This is a very useful article to read if you need more help with this:
如果您需要更多帮助,这是一篇非常有用的文章:
回答by FIR55TORM
Possibly use css3 border-radius and keep the height small to get an elliptical shape, good site to use for cross browser support (browsers that support css3 only of course unless you use css3 pie http://css3pie.com/) http://border-radius.com/
可能使用CSS3边框半径,并保持高度的小得到一个椭圆形,很好的网站,使用了跨浏览器支持(浏览器的支持CSS3唯一的办法,除非你使用CSS3馅饼http://css3pie.com/) 的http:/ /border-radius.com/
koolies
傻瓜