看到网上有许多漂亮的圆角按钮，自己也想实现一下这样的按钮，所以就自己做了一个。实现这样的效果，需要三张图片来拼合而成。左边的圆角（大约需要2-3像素宽，当然越窄越好），中间的1像素宽的图片，右边的圆角（大约需要2-3像素宽，当然越窄越好）。好了，有了这三张图片，下面就看怎么实现的吧。

左边的圆角图：

右边的圆角图：

 

中间的图片：

 

效果图展示：

 

首先定义CSS样式

 

<style type="text/css">

      .left{background:url(Images/btnleft1.jpg) left no-repeat; height:32px; padding:0 0 0 2px; font-size:13px;float:left;margin:0px}

      .right{background:url(Images/btnright1.jpg) right no-repeat; height:32px; width:2px; float:left;margin:0px}

      .middle{float:left; border:0; line-height:32px; color:#000000; font-family:"微软雅黑"; cursor:pointer; height:32px; background:url(Images/btnmiddle1.jpg) repeat-x;margin:0px}

    </style>

接着定义js样式

$(funchion(){

$("input[type='button']").wrap("<div class='left'></div>").after("<div class='right'></div>").addClass("middle");

})。

最后是html代码：

 

<body>

    <form id="form1" runat="server">

    <input type="button" value="哈哈" />

    <br /><br />

    <input type="button" value="看我变长了嘛" />

    <br /><br />

    <input type="button" id="dd" value="保存似懂非懂施工方的各个地方" class="btn1" />

    </form>

</body>

完整代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#k").live("mouseover mouseout", function () {

                if (event.type == "mouseover") {

                    $("#z").css("display", "");

                }

                else {

                    $("#z").css("display", "none");

                }

            })

            $("input[type='button']").wrap("<div class='left'></div>").after("<div class='right'></div>").addClass("middle");

        })

    </script>

    <style type="text/css">

      .left{background:url(Images/btnleft1.jpg) left no-repeat; height:32px; padding:0 0 0 2px; font-size:13px;}

      .right{background:url(Images/btnright1.jpg) right no-repeat; height:32px; width:2px; float:left;}

      .middle{float:left; border:0; line-height:32px; color:#000000; font-family:"微软雅黑"; cursor:pointer; height:32px; background:url(Images/btnmiddle1.jpg) repeat-x;}

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <input type="button" value="哈哈" />

    <br /><br />

    <input type="button" value="看我变长了嘛" />

    <br /><br />

    <input type="button" id="dd" value="保存似懂非懂施工方的各个地方" class="btn1" />

    </form>

</body>

</html>

以上就是实现的过程，很简单吧