CSS样式-圆角文字边框

原理：

1.只有一个比较长的背景图片

2.用两个元素，一个表示左边，一个表示右边

3.长度自适应，撑开相应的宽度

 

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
        body {
            background-color: #000;
        }
        a {
            display: inline-block;
            height: 33px;
            padding-left: 15px;
            background: url(images/lTcb_ve.png) no-repeat;
            line-height: 33px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            margin: 100px;
            font-weight: 700;

        }

        span {
            display: inline-block;
            height: 33px;
            padding-right: 15px;
            background: url(images/lTcb_ve.png) no-repeat right;
        }
    </style>
</head>
<body>
    <a href="#">
        <span>首页</span>
    </a>
</body>
</html>
posted @ 2021-03-29 23:31  #Friday  阅读(236)  评论(0)    收藏  举报