css3 渐变标题线

最新推荐文章于 2022-08-17 18:30:41 发布

原创最新推荐文章于 2022-08-17 18:30:41 发布 · 602 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

3 篇文章

订阅专栏

css3 渐变标题线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>css3 渐变标题线</title>
    <style type="text/css">
        *{list-style: none;}
        .jbfgx{
            width: 100%;
            height: 100px;
            text-algin:center;
        }
        .jbfgx .title{
            position: relative;
            text-align: center;
        }
        .jbfgx .title:before, .cutting_line:after{
            content:"";
            width: 40%;
            height: 1px;
            position: absolute;
            top: 50%;
        }
        .jbfgx .title:before{
            background: -webkit-linear-gradient(right, #666, #eee);
            background: -moz-linear-gradient(left, #666, #eee);
            background: -ms-linear-gradient(left, #666, #eee);
            background: -o-linear-gradient(left, #666, #eee);
            background: linear-gradient(to left, #666, #eee);
            left: 2px;
        }
        .jbfgx .title:after{
            background: -webkit-linear-gradient(left, #666, #eee);
            background: -moz-linear-gradient(right, #666, #eee);
            background: -ms-linear-gradient(right, #666, #eee);
            background: -o-linear-gradient(right, #666, #eee);
            background: linear-gradient(to right, #666, #eee);
            right: 2px;
        }
    </style>

</head>
<body>
    <div class="jbfgx">
        <p class="title">这是个标题</p>
    </div>
</body>
</html>