我有以下按钮:
我需要使用 HTML/CSS3 来完成。我已经尝试了很多东西,比如径向渐变。
我试过 -webkit-gradient(linear.. 和 -webkit-gradient(radial...
任何帮助或想法?
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;
}
径向渐变仅适用于圆形或椭圆形,因此如果没有图像或某些 css 画布,您将无法获得该样式...
使用 CSS,我能得到的最接近的只是一个线性渐变,从上到下。底部的一点点光线很难用 CSS 做。您可能需要考虑一个图像,如果它不是很大,不会对性能产生太大影响。
您可能希望查看服务器端编码的性能,因为这是大多数时候的问题。如果是因为您需要加载大量图像,您可以获取站点上的所有图像并将其放在一个文件中,并且始终获取该文件但具有不同的背景位置。StackOverflow 也使用这个。这种技术被称为使用sprites
关于它的作用和工作原理的指南可以在这里找到:CSS Tricks: Sprites。
这是我得到的最接近的:http: //jsfiddle.net/DU3QJ/