Question

我想知道如何制作这样一个按钮：

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

主要问题，不是问题。虽然，我不知道如何使用右侧的自定义图像以及漂亮的边框。（CSS）

有人可以帮助我吗？

最基本的问候

Answer 1

首先，亲自尝试一下。

然后你必须阅读以下CSS属性：

背景渐变
边界
箱阴影
边界半径

Answer 2

为什么我不工作？您可以使用此示例来了解如何执行此操作。不要只使用这个代码 - 它有点大，不是特别有效，并且只在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;
    }

Answer 3

在这里，看看我为你制作的demo。

它仅适用于webkit，但您可以通过查看其他浏览器的供应商前缀来解决此问题。

Answer 4

我认为最好的方法是使用背景图片，因为它是一个适用于所有浏览器的解决方案。你也可以使用CSS3，但这只会被一些现代浏览器所嘲弄。

我建议您使用firebug或chrome开发工具来查看该按钮的实际完成情况，并尝试做类似的事情。

如何制作一个带有漂亮边框的按钮 - 内部类HTML / CSS

4 个答案: