Question

我从广告部门获得了一些图片，将其放在网站上以供选项卡等。但我相信这会减慢页面的渲染速度。所以我想我会用css做的。但经过几次试验后，我无法接近以下图像。我很感激这两张图片的任何帮助。

请删除此问题 我想如果我找不到东西，我将不得不对此进行研究，然后重新发布。你能否就结束这个问题投票谢谢

Answer 1

顶部和底部颜色的两个十六进制分别是＃FF7F00和＃ED3400。然后，您可以使用link that Chad von Nau provided并相应地编辑边框，四舍五入和文字。

以下是我为您的图片提出的建议。

<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>

Answer 2

试试这个：http://www.cssbuttongenerator.com/

来自图像的CSS渐变

2 个答案: