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);}
- 热门促销
- 快餐
- 西餐
- 面包甜点
- 自助餐