滑动门

1.如果图片是固定大小的, 那么将来我们的按钮变宽之后, 图片会变形
2.如果在企业开发中按钮的宽度是不确定的, 那么就可以使用三个标签嵌套的形式来实现
2.1 最外层标签的背景是1px的背景的图片, 然后让它平铺x轴方向
2.2 第二层标签的背景是左边的图片, 然后不平铺
2.3 第三层的标签北京是右边的图片, 然后也不平铺
在前端开发中这种布局方式, 我们称之为滑动门
3.要想实现滑动门除了可以利用三个标签以外, 还可以利用两个标签
只不过两个标签的扩展性没有三个标签的好, 两个标签的宽度扩展到一定程度的时候, 会有问题
4.滑动门的注意点:
文字内容必须放到最里面的一个标签中

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 200px;
            height: 60px;
            background: url("image/nav-center.jpg") repeat-x;
        }
        .container .left{
            width: 100%;
            height: 100%;
            background: url("image/nav-left.jpg") no-repeat;
        }
        .container .left .right{
            width: 100%;
            height: 100%;
            background: url("image/nav-right.jpg") no-repeat right;
        }
</style>


<div class="container">
    <div class="left">
        <div class="right">我是按钮</div>
    </div>
</div>