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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:28:10  来源:igfitidea点击:

Rounded corner & elliptical shape button in HTML

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:

看看这里:

http://jsfiddle.net/xnTZq/

http://jsfiddle.net/xnTZq/

Or with some extra ugly fanciness:

或者有一些额外的丑陋幻想:

http://jsfiddle.net/xnTZq/6/

http://jsfiddle.net/xnTZq/6/

回答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:

如果您需要更多帮助,这是一篇非常有用的文章:

http://www.css3.info/preview/rounded-border/

http://www.css3.info/preview/rounded-border/

回答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

傻瓜