css 列表问题_html/css_WEB-ITnose

    

        
            
            
            
            
    
    
        

            
•  Home

            
• My Blog

            
• Friends

            
• Next Station

            
• Contact Me

        

    
    怎么让运行结果如此图 

回复讨论(解决方案)

已经是这样的效果了

学习，接分。。。

不是  你仔细看 每个

的下边框长度不一样 

不是  你仔细看 每个

的下边框长度不一样 
还真没发现你说的问题

不是  你仔细看 每个

的下边框长度不一样 
还真没发现你说的问题
这段代码结果是： 而我想让结果是： 就那几个

下面的边框线长度不一样

浏览器问题，把border-bottom-width的值设大点效果更明显

浏览器问题，把border-bottom-width的值设大点效果更明显

那个我设置过 但太粗了 我想要的不是那个效果 我还有套代码 能实现我说的那个效果 




   

    

        
• Home

        
• My Blog

        
• Friends

        
• Next Station

        
• Contact Me

    

但我不知道之前发的那套为啥达不到此效果

每个元素想一个盒子模型，你可以搜索一下。四边的border其实是有交叉的，所以每个border是一个梯形而不是长方形。这是导致你的第一个样式想过的原因，通过楼上的那个把border-bottom加大的例子就看得很清楚。网上有通过这种特性来制作纯css的三角形的例子。
你的第二个样式，是通过设置外层li的border-bottom来避免内层a的padding给border带来的影响。
另外可以试试通过设置ul的背景和li的margin实现border的效果。点击查看 在线演示

但我不知道之前发的那套为啥达不到此效果