css - 我可以用纯 CSS 制作这种样式吗(按钮)

Question

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

Answer 1

您可以使用以下 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

注意事项 红色 block 在哪里，应该可以添加 png 图像。此外，您还必须记住，不支持 Internet Explorer 8 下的大多数 css3。要为 ie 添加一些 css3 功能，您可以使用 pie.htc