图片的 CSS 渐变

Question

我的广告部门给了我一些图像，将其放在网站上的选项卡等。但是我确信这会减慢页面的呈现速度。所以我想我会用 css 来做。然而，经过几次试验，我无法接近以下图像。对于这两张图片，我将不胜感激。

请删除这个问题 我想我将不得不解决这个问题，如果我想不通，就重新发布。你能投票结束这个问题吗 谢谢

Answer 1

顶部和底部颜色的两个十六进制代码分别是#FF7F00 和#ED3400。然后您可以使用 link that Chad von Nau provided并适本地编辑边框、圆 Angular 和文本。

这是我为您的图片想出的。

<style type="text/css">
classname{
    -moz-box-shadow:inset 0px 1px 0px 0px #db8f4c;
    -webkit-box-shadow:inset 0px 1px 0px 0px #db8f4c;
    box-shadow:inset 0px 1px 0px 0px #db8f4c;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff8000), color-stop(1, #ed3300) );
    background:-moz-linear-gradient( center top, #ff8000 5%, #ed3300 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8000', endColorstr='#ed3300');
    background-color:#ff8000;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:21px;
    font-weight:bold;
    padding:11px 54px;
    text-decoration:none;
    text-shadow:-1px -1px 0px #ed3300;
}.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ed3300), color-stop(1, #ff8000) );
    background:-moz-linear-gradient( center top, #ed3300 5%, #ff8000 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed3300', endColorstr='#ff8000');
    background-color:#ed3300;
}.classname:active {
    position:relative;
    top:1px;
}
</style>