jquery插件之圆角

参考 用CSS作圓邊方塊

.roundBorder
            {
                display: block;
            }
            .roundBorder *
            {
                background: white;
                display: block;
                height: 1px;
                overflow: hidden;
            }
            .roundBorderLayer1
            {
                border-left: 1px solid #C4C4C4;
                border-right: 1px solid #C4C4C4;
                margin: 0px 1px;
            }
            .roundBorderLayer2
            {
                border-left: 1px solid #D3D4D5;
                border-right: 1px solid #D3D4D5;
                margin: 0px 2px;
                padding: 0px;
            }
            .roundBorderLayer3
            {            
                background: #C4C4C4;
                border-left: 1px solid #D3D4D5;
                border-right: 1px solid #D3D4D5;
                margin: 0px 3px;
            }
            .roundContent
            {
                background:white;
                border-left: 1px solid #C4C4C4;
                border-right: 1px solid #C4C4C4;
                overflow: hidden;
                padding: 4px 10px;
            }

<script type="text/javascript">
        $.fn.Corner = function(opts) {
            opts = $.extend({
            }, opts);
            return this.each(function() {
                var $content = $(this);
                $content.before('<b class="roundBorder"><b class="roundBorderLayer3"></b><b class="roundBorderLayer2"></b><b class="roundBorderLayer1"></b></b>');
                $content.after('<b class="roundBorder"><b class="roundBorderLayer1"></b><b class="roundBorderLayer2"></b><b class="roundBorderLayer3"></b></b>');
            });
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".roundContent").Corner();
        });
    </script>