Question

如何在css中获得此渐变效果？

alt text

Answer 1

我最近看到了这些例子：

http://lab.simurai.com/css/buttons/

这些使用了很多前沿的CSS所以彻底测试......

Answer 2

退房：http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

Answer 3

你需要CSS3。但是并非所有浏览器都支持它。检查http://css3generator.com/以生成渐变。它会将您发送到一个非常棒的渐变编辑器：http://www.colorzilla.com/gradient-editor/。这里有一个示例来创建一个支持旧版浏览器的渐变：

/* old browsers */
background: #1E5799; 
/* firefox */
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%);
/* webkit */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
/* ie */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 );

您还可以使用CSS3 PIE为Internet Explorer添加CSS3支持：http://css3pie.com/。祝你好运！

Answer 4

您可以使用以下css和html来实现帖子中的按钮

<强> CSS

#button {
    background-color: #7BCEE6;
    background-image: -moz-linear-gradient(top, #7BCEE6, #3F7DBB); /* FF3.6 */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7BCEE6), color-stop(1, #3F7DBB)); /* Saf4+, Chrome */
    background-image: linear-gradient(top, #7BCEE6, #3F7DBB);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7BCEE6', EndColorStr='#3F7DBB'); /* IE6–IE9 */
    width:120px;
    height:40px;
    -moz-border-radius: 12px; /* FF1+ */
    -webkit-border-radius: 12px; /* Saf3-4 */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome */
}
#image {
    width:25px;
    height:40px;
    background:#930;
    margin-left:10px;
    float:left;
}
#text {
    text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */
    color:#fff;
    font-size:22px;
    float:left;
    margin-top:5px;
}

<强> HTML

<div id="button">
  <div id="image"></div>
  <div id="text">Reports</div>
</div>

直播示例：http://jsbin.com/ebuno5

备注红色块在哪里，假设你可以添加一个png图像。此外，您必须记住，不支持Internet Explorer 8下的大多数css3。为了添加一些css3功能，你可以pie.htc

Answer 5

是的，我使用http://gradients.glrzad.com/来生成这个CSS：

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.45, rgb(26,106,163)),
    color-stop(0.87, rgb(36,183,224))
);

background-image: -moz-linear-gradient(
    center bottom,
    rgb(26,106,163) 45%,
    rgb(36,183,224) 87%
);

但请注意（我相信你确实如此）这在Internet Explorer中不起作用。

此外，您必须查看 Chris Coyier的CSS3 button maker 。

Answer 6

我使用this site作为渐变。

但是请注意，Opera（目前版本为11）根本不支持CSS3渐变，所以请确保它看起来没问题，但有一些回退。

Answer 7

看看CSS Pie。它提供跨浏览器边框半径，框阴影和渐变功能

我可以用纯CSS制作这种风格（按钮）

7 个答案: