-4

我有以下按钮：

在此处输入图像描述

我需要使用 HTML/CSS3 来完成。我已经尝试了很多东西，比如径向渐变。

我试过 -webkit-gradient(linear.. 和 -webkit-gradient(radial...

任何帮助或想法？

4

3 回答 3

2

这是一个尝试：

div {
    background-image:-moz-radial-gradient(50% 100%, yellow, #FFCC00, yellow);
    background-image:-webkit-radial-gradient(50% 100%, yellow, #FFCC00, yellow);
    background-image: radial-gradient(50% 100%, yellow, #FFCC00, yellow);
    height:47px;
    width:202px;
    border-radius:5px;
    text-align:center;
    line-height:47px;
    font-weight:bold;
    font-family: sans-serif;
    color:#AA8100;
}
于 2012-07-21T19:28:37.423 回答
0

径向渐变仅适用于圆形或椭圆形，因此如果没有图像或某些 css 画布，您将无法获得该样式...

于 2012-07-22T00:00:58.460 回答
-1

使用 CSS，我能得到的最接近的只是一个线性渐变，从上到下。底部的一点点光线很难用 CSS 做。您可能需要考虑一个图像，如果它不是很大，不会对性能产生太大影响。

您可能希望查看服务器端编码的性能，因为这是大多数时候的问题。如果是因为您需要加载大量图像，您可以获取站点上的所有图像并将其放在一个文件中，并且始终获取该文件但具有不同的背景位置。StackOverflow 也使用这个。这种技术被称为使用sprites

关于它的作用和工作原理的指南可以在这里找到：CSS Tricks: Sprites。

这是我得到的最接近的：http: //jsfiddle.net/DU3QJ/

于 2012-07-21T19:28:27.313 回答