码迷,mamicode.com
首页 > Web开发 > 详细

css 标题三条横线

时间:2018-03-29 00:02:50      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:idt   round   区域   lock   weight   ott   cli   lin   font   

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 标题三条横线

标签:idt   round   区域   lock   weight   ott   cli   lin   font   

原文地址:https://www.cnblogs.com/queende7/p/8666514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!