How CSS achieves the bottom line overlap effect:
Sometimes to achieve this effect, is the title below the underline color and the container's underline color is different, the following share a code instance.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><styletype= "Text/css">*{padding:0;margin:0;}. Line{Border-bottom:2px solid #EBEBEB;Margin-top:10px;Margin-bottom:10px;}H2{Border-bottom:2px solid Skyblue;font-size:14px;Line-height:20px;Display:Inline-block;*display:inline;*zoom:1;Margin-bottom:-2px;}</style></Head><Body><Divclass= "line"> <H2>Ant Tribe One</H2></Div><Divclass= "line"> <H2>It's a good day.</H2></Div><Divclass= "line"> <H2>Only the struggle will have a good result</H2></Div><Divclass= "line"> <H2>Every day is beautiful, must cherish well</H2></Div></Body></HTML>
The above code implements the effect we want, the main implementation principle is to set the H element's margin-bottom to -2px, so that the H border is coincident with the div's border.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0525/2445.html
The most original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=9623
How CSS achieves the bottom line overlap effect