html - 如何制作带有漂亮边框的按钮 - 在 HTML/CSS 类中

Question

我想知道如何制作这样的按钮:

http://i43.tinypic.com/e21b7.png

主要问题，不是问题。虽然，我不确定如何在右侧使用自定义图像以及那个漂亮的边框来制作它。 (CSS)

有人可以帮助我吗？

致以诚挚的问候

Answer 1

我为什么不工作？您可以使用此示例来了解如何执行此操作。不要只使用这段代码——它有点大，效率不是特别高，而且只在 webkit 中测试过。这在 IE、Opera、Firefox 中可能是一场灾难，谁知道呢。您需要使用 CSSPie 和更多的供应商前缀来使浏览器更加兼容，这本身可能就是一个灾难。一个按钮有很多代码。

无论如何，您可以从中了解它是如何完成的。

jsfiddle

代码:

html

<div id="btn">
    <p>200 <span>cr</span></p>
    <span class="plus">+</span>
</div>

CSS

html {
    height: 100%;
    font-family: sans-serif;
}

body {
    height: 100%;
    color: #fff;
    background: #505050;
    background-attachment: fixed;
    background: -webkit-gradient(linear, top, bottom, from(#09465d), to(#0f536e));
    background: -webkit-linear-gradient( 90deg, #09465d, #0f536e);
    background: -moz-linear-gradient(    90deg, #09465d, #0f536e);
    background: linear-gradient(         90deg, #09465d, #0f536e);
}

#btn {
    font-size: 13px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.9);
    margin: 20px;
    background: -webkit-gradient(linear, top, bottom, from(#1d4763), to(#215f86));
    background: -webkit-linear-gradient( 90deg, #1d4763, #215f86);
    background: -moz-linear-gradient(    90deg, #1d4763, #215f86);
    background: linear-gradient(         90deg, #1d4763, #215f86);
    overflow: hidden;
    display: inline-table;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
    border-radius: 3px;
    cursor: pointer;
}

#btn:hover {
    background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
    background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
    background: -moz-linear-gradient(    90deg, #19405a, #1d587d);
    background: linear-gradient(         90deg, #19405a, #1d587d);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
    border-radius: 3px;
}

#btn:active {
    background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
    background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
    background: -moz-linear-gradient(    90deg, #19405a, #1d587d);
    background: linear-gradient(         90deg, #19405a, #1d587d);
    -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
    border-radius: 3px;
}
    #btn p, span, p span {
        height: 30px;
        line-height: 30px;
        display: inline-block;
        margin: 0;
    }

    #btn p {
        padding: 0 12px;
        border-right: 1px solid rgba(0,0,0,.1);
    }

    #btn span.plus {
        padding: 0 12px;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(255,255,255,.1);
    }

    #btn p span {
        font-size: 10px;
    }