CSS——滑动门

在背景图片中可以对图片进行圆角设置，但是这样是写死的。如下图：

CSS——滑动门-LMLPHP

情况分析：如果我们li标签中的文字变少了或者变多了，我们就需要重新定义背景图片。所以我们使用滑动门技术。它将图片特殊地方进行分割。宽度利用的是字体的宽度，在加上padding进行调整。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <style type="text/css">

        li {

            list-style: none;

            float: left;

        }

            li a {

                height: 35px;

                background-image: url("bg_r1_c1.png");

                background-repeat: no-repeat;

                padding-left: 7px;

                display: inline-block;

                color: white;

            }

            li span {

                height: 35px;

                background-image: url("bg_r1_c2.png");

                background-repeat: no-repeat;

                background-position: right;

                display: inline-block;

                padding-right: 22px;

                line-height: 35px;

            }

        a:hover {

            background: url("blue_r1_c1.png");

        }

        a span:hover {

            background: url("blue_r1_c2.png") right;

        }

    </style>

</head>

<body>

    <ul>

        <li>

            <a href="#">

                <span>百度一下</span>

            </a>

        </li>

        <li>

            <a href="#">

                <span>百度</span>

            </a>

        </li>

        <li>

            <a href="#">

                <span>中国新闻网</span>

            </a>

        </li>

    </ul>

</body>

</html>

效果：

CSS——滑动门-LMLPHP