css 标题三条横线

前端开发   发布日期:2025年08月31日   浏览次数:310
HTML:
   
    <div class="rule-title">
        <div class="menu-icon"><div>
            活动*规则
        <div class="menu-icon"><div>
    </div>

 

 
 
CSS:
    .rule-title {
        font-weight: bold;
        margin: 30px auto;
        font-size: 32px;
    }
    /* 3条横线 */
    .rule-title .menu-icon {
        display: inline-block;
        width: 50px;
        height: 2px;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
       
        padding: 5px 0;
        margin: 0 10px 10px;
        background-clip: content-box; 
        /* 
            background-clip: 规定背景的绘制区域。
                border-box-----背景被裁剪到边框盒;
                padding-box-----背景被裁剪到内边距框;
                content-box-----背景被裁剪到内容框;
        */
    }

 

 

以上就是css 标题三条横线的详细内容,更多关于css 标题三条横线的资料请关注九品源码其它相关文章!