CSS——滑动门

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

情况分析：如果我们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>

效果：

posted @ 2017-11-08 12:42  var_obj  阅读(215)  评论(0)    收藏  举报