当CSS样式表中设置了两条相交的线时,这时候的显示效果就会成为一个疑惑。因为CSS会将这两条线重叠显示。如果你想通过CSS将这两条线分离开,则需要了解CSS的不同属性。.line1 { positio
当CSS样式表中设置了两条相交的线时,这时候的显示效果就会成为一个疑惑。因为CSS会将这两条线重叠显示。如果你想通过CSS将这两条线分离开,则需要了解CSS的不同属性。
.line1 { position: absolute; top: 50px; left: 50px; height: 20px; width: 100%; border-top: 2px solid blue; } .line2 { position: absolute; top: 70px; left: 50px; height: 20px; width: 100%; border-top: 2px solid red; }
在上述代码中,两条线的颜色和边框宽度已定义,但这些样式并不能使这两条线分开显示。你还需要为两条线设置不同的CSS属性,才能将它们分离开来。
.line1 { position: absolute; top: 50px; left: 50px; height: 20px; width: 100%; border-top: 2px solid blue; z-index: 1; } .line2 { position: absolute; top: 70px; left: 50px; height: 20px; width: 100%; border-top: 2px solid red; z-index: 2; }
在这段代码中,使用了z-index属性定义两条线的优先级。即将第二条线的优先级设置为大于第一条线,因此第二条线将显示为在第一条线的上方。
粉丝
0
关注
0
收藏
0