文章标题

来源：互联网发布：suse 11 yum 编辑：程序博客网时间：2024/06/11 21:20

CSS3实现边框从中间向两边伸展

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        ul {            list-style: none;            margin-top: 50px;        }        ul li {            float: left;            position: relative;        }        ul li a {            text-decoration: none;            color: #ffffff;            padding: 15px 20px;            background-color: #384E6B;        }        ul li.active > a {            padding-top: 11px;            background-color: #0e151f;            border-top: 4px solid #a9334c;        }        ul li a:before {            content: '';            width: 0;            position: absolute;            left: 50%;            top: -15px;            background: #a9334c;            height: 4px;            transition: all 0.5s;        }        ul li a:hover:before{            left:0;            width: 100%;        }    </style>    <script src="js/jquery.min.js"></script></head><body><div class="nav">    <ul>        <li class="active">            <a href="#">首页</a>        </li>        <li>            <a href="#">文档</a>        </li>        <li>            <a href="#">下载</a>        </li>        <li>            <a href="#">实例</a>        </li>        <li>            <a href="#">社区</a>        </li>    </ul></div><script>    $(function(){        $("li").on("click",function(){            $("li").removeClass("active");            $(this).addClass("active");        })    })</script></body></html>

以上是模仿Echarts网站的导航效果做的，[http://echarts.baidu.com/api.html#echarts]

在上面的方法之前，用transfom:scale也做了这个效果，如下是主要代码
结构：
这里写图片描述
样式：

大家可以看到.line宽度设置为1px,这里就是为了尽可能做出Echarts网站的效果，起初我设置的边框颜色不是背景色，这样就能看到一个红点，有点不友好。改为背景色就ok了，当然有什么不妥的地方或者更好的实现方法，大家可以评论。

阅读全文

0 0