Html 制作一个带有圆边的 3D 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11373841/
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
Make a 3D button with rounded edge
提问by rick
I am developing a website in which i want to implement 3D buttons with rounded edges.So for that i need to create a CSS file.I search alot about 3D button but nothing has worked for me as yet.
我正在开发一个网站，我想在其中实现带有圆角边缘的 3D 按钮。因此，我需要创建一个 CSS 文件。我搜索了很多关于 3D 按钮的内容，但目前还没有任何效果。
回答by Samuel Parkinson
You want to use a combination of the following css styles: border, border-radius, background, text-shadowand finally box-shadow.
你想用以下的CSS样式的组合：border，border-radius，background，text-shadow和最后box-shadow。
To achieve the 3D effect with these you need to use the gradientvalue on the backgroundstyle.
要使用这些实现 3D 效果，您需要在样式上使用渐变值background。
There is a useful tool for making cross browser gradient css here: http://www.colorzilla.com/gradient-editor/
这里有一个制作跨浏览器渐变 css 的有用工具：http: //www.colorzilla.com/gradient-editor/
And here is some example CSSthat can style an atag:
这是一些CSS可以设置a标签样式的示例：
.button {
display: block;
height: 30px;
margin-bottom: 10px;
text-align: center;
line-height: 30px;
width: 150px;
margin: 20px;
color: #FFF;
text-align: center;
border: solid #427AA8 1px;
border-radius: 5px;
text-decoration: none;
/* Gradient */
background: #427AA8;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzU5YTNlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MjdhYTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #59A3E0 1%, #427AA8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#59A3E0), color-stop(100%,#427AA8));
background: -webkit-linear-gradient(top, #59A3E0 1%,#427AA8 100%);
background: -o-linear-gradient(top, #59A3E0 1%,#427AA8 100%);
background: -ms-linear-gradient(top, #59A3E0 1%,#427AA8 100%);
background: linear-gradient(to bottom, #59A3E0 1%,#427AA8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59A3E0', endColorstr='#427AA8',GradientType=0 );
text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
box-shadow: 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
}
.button:hover {
background: #59A3E0;
text-decoration: none;
filter: none;
}?
<a href="#" class="button">Example Button</a>
And example of what you can make: jsfiddle.net/UPTyw
以及您可以制作的示例：jsfiddle.net/UPTyw
This works well with all modern browsers and ok with IE8-6 (which don't support border-radius). This method also uses no images.
这适用于所有现代浏览器，也适用于 IE8-6（不支持border-radius）。此方法也不使用图像。
Also checkout this question, Google's Imageless Buttons, which explains how Google have created their range of CSSbuttons.
还可以查看这个问题，Google 的 Imageless Buttons，它解释了 Google 如何创建他们的CSS按钮范围。
IE9 Bug
IE9 错误
IE9 has a bug with rendering border-radiusif filteris set. The fix is to add the following IE9 only CSSto any elements using css gradients.
IE9 有一个错误，border-radius如果filter设置了渲染。解决方法是将以下 IE9 仅添加CSS到使用 css 渐变的任何元素。
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
回答by Patrick Oscity
Have a look at http://css3button.net/
回答by Ignitor
Try out http://www.cssbuttongenerator.com/
试试http://www.cssbuttongenerator.com/
When you finished styling your button, click on it and the corresponding CSS will appear in the box at the bottom.
完成按钮样式后，单击它，相应的 CSS 将出现在底部的框中。
回答by Leo
<style>
button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
</style>
<button>Test</button>
