使用css3制作渐变分割线

来源：互联网发布：sql server win7 64位编辑：程序博客网时间：2024/04/28 03:51

原文出处：http://my.oschina.net/hwxn/blog/615201

效果图：

<!DOCTYPE html><html><head>    <style>        .title        {            position: relative;            text-align: center;        }            .title:before, .title:after            {                content: "";                width: 40%;                height: 1px;                position: absolute;                top: 50%;            }            .title:before            {                background: -webkit-linear-gradient(right, #666, #eee);                background: -o-linear-gradient(left, #666, #eee);                background: -moz-linear-gradient(left,#666, #eee);                background: linear-gradient(to left, #666, #eee);                left: 2px;            }            .title:after            {                background: -webkit-linear-gradient(left, #666, #eee);                background: -o-linear-gradient(right, #666, #eee);                background: -moz-linear-gradient(right,#666, #eee);                background: linear-gradient(to right, #666, #eee);                right: 2px;            }    </style></head><body>    <p class="title">这是一个标题</p></body></html>

0 0