border :before :after 的应用

BORDER BEFORE AFTER

        .head_list li{color:#4E4D52;position:relative;float:left;height:30px;background:-webkit-linear-gradient(top, #f2f2f2, #E6E6E6, #d1d1d1) #E6E6E6;border-right:1px solid #dbdbdb;width:133px;text-align:center;line-height:30px;font-size:14px;display:block;}
        .no_border{border:none !important;}
        .head_list li .on{z-index: 1;top: -5px;left: 0px;width: 133px;line-height:40px;height: 34px;position: absolute;color: #FFF;background:#574187;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),-1px 0px 2px rgba(0, 0, 0, 0.4);
        -ms-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),-1px 0px 2px rgba(0, 0, 0, 0.4);-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),-1px 0px 2px rgba(0, 0, 0, 0.4);-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),-1px 0px 2px rgba(0, 0, 0, 0.4);}
        .head_list li .on:before{content: '';z-index: 1;height: 3px;position: absolute;top: -3px;right: -3px;border-width: 0px 3px 4px 0px;border-style: solid;border-color: rgba(66, 48, 110, 0)rgba(66, 48, 110, 0) #42306E #42306E;}
        .head_list li .on:after{content: '';width: 0px;height: 1px;position: absolute;top: -1px;left: -3px;border-width: 0px 0px 4px 3px;border-style: solid;border-color: rgba(66, 48, 110, 0) #42306E #42306E rgba(66, 48, 110, 0);}

 

• 热门促销
• 快餐
• 西餐
• 面包甜点
• 自助餐

转载于:https://www.cnblogs.com/2boy/archive/2013/04/24/3039936.html