使用css3制作渐变分割线

最新推荐文章于 2024-02-06 18:41:34 发布

chelen_jak

最新推荐文章于 2024-02-06 18:41:34 发布

阅读量2.8k

点赞数

分类专栏： CSS 实用

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

CSS

191 篇文章

订阅专栏

本文介绍了一种使用CSS实现的具有渐变背景效果的标题样式。通过设置:before和:after伪元素，并利用线性渐变背景，可以制作出美观且响应式的标题装饰效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出处： 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>