Question

我正在尝试将按钮的.psd图像切成HTML5 + CSS3按钮。但我不想只是将其设置为背景。我想为背景切片1个重复的瓷砖和4个角，因此按钮根据其内容正确展开。有人能给我一个基本的想法如何摆放角落？我在论坛中搜索过，但没有人切片按钮，他们只是将整个图像作为背景。那就是我到目前为止所拥有的：

编辑：我有一个重复作为背景的图块，以及整个4个角落的4个图像。

HTML：

 <!DOCTYPE html>
<html>
<head>
    <title>Exercise1</title>
    <link rel="stylesheet" type="text/css" href="exercise1.css">
</head>
<body>
    <div><a href="">OK</a></div>
    <div><a href="">Cancel</a></div>
    <div><a href="">View More Information</a></div>
</body>
</html>

CSS：

body {

    background-color: black;
}

a {

    color: black;
    text-decoration: none;
    display: inline-block;
    padding-top: 13px;
    background: url(pictures/background_tile.png) repeat-x center top;
    height: 32px;
    overflow: hidden;

}

这就是我试图设置角落的方式，但它搞得一团糟：

div {
    background: url(pictures/btn_top_left.png) no-repeat left top;
}

Answer 1

这是它的要点，你需要修复右侧并更准确地切割按钮。而且，这些不会扩展高度，只扩展宽度。如果你想要高度，那么让角落更高，3-4倍高，并玩它。这些天没有人这样做，你可以使用css3制作看起来相同的按钮。

<强> http://jsfiddle.net/26tWC/

<ul class="button">
     <li class="tl">&nbsp;</td>
        <li class="text"><a href="">Button Text</a></li>
        <li class="tr">&nbsp;</li>
     <li class="bl">&nbsp;</li>
     <li class="br">&nbsp;</li>
</ul>



<ul class="button">
     <li class="tl">&nbsp;</td>
        <li class="text"><a href="">Longer Text Goes Here</a></li>
        <li class="tr">&nbsp;</li>
     <li class="bl">&nbsp;</li>
     <li class="br">&nbsp;</li>
</ul>


body {
    background-color: #fff;
    font-family:arial;
}

.button {
    height:48px;margin:0;padding:0 38px 0 19px;
    list-style:none;white-space:nowrap;position:relative;
     display:inline-block;
}

.button .text {
    background: url(http://i43.tinypic.com/2zgem49.gif) repeat-x center top;
    white-space:nowrap;
    height:48px;
    line-height:48px;
}

.button a {text-decoration:none;color:#000;}

.button li {position:absolute;}

.button .text {float:left;height:47px;position:relative;}

.tl {
    width:19px;
    top:0;
    left:0;
    height:24px;
    background: url(http://i43.tinypic.com/5xifdg.gif) no-repeat 0 0;
}

.bl {
    width:19px;
    bottom:0;
    left:0;
    height:24px;
    background: url(http://oi42.tinypic.com/dninnl.jpg) no-repeat 0 0;
}



.tr {
    width:38px;
    right:0;
    top:0;
    height:24px;
    background: url(http://oi43.tinypic.com/2vn0sk6.jpg) no-repeat 0 0;
}


.br {
    width:38px;
    bottom:0;
    right:0;
    height:24px;
    background: url(http://oi42.tinypic.com/2yjskde.jpg) no-repeat 0 0;
}

使用这些工具在CSS3中进行此操作：

http://css3generator.com/

http://www.colorzilla.com/gradient-editor/#fdffff+0,e6f8fd+21,c8eefb+54,bee4f8+75,b1d8f5+100;Custom

将photoshop图像切成HTML5 + CSS3按钮（角点问题）

1 个答案: