8"> <br> <br> ul{ <br> width:200px; <br> color:white; <br> list-style-type:none; <br> font-family :Arial; <br> margin:0px; <br> padding:0px; <br> <br> li{ <br> border-left:12px solid #711515; <br> border-right:1px solid #711515; <br> border -bottom:1px solid #ED9F9F; <br> <br> { background-color:#ffdee0; <br> background-color: #990020; / <body> <br><br> li> <br> > <br> > </body> <br> </html> How to make the running result look like this? <br> <br> <br> <br> </p> <p>Reply to the discussion (solution)</p> Already like this The effect is <br> <h2> Study and receive points. . . </h2> <p class="sougouAnswer"> No. If you look carefully, the length of the bottom border of each <li> is different. </p> <p class="sougouAnswer"> </p> No. If you look carefully, the length of the bottom border of each <li> is different. <p class="sougouAnswer"> </p> I really didn’t find the problem you mentioned <p class="sougouAnswer"> </p> <p class="yy"> </p> <br> No, if you look carefully, the length of the bottom border of each <li> is different <p class="sougouAnswer"> </p> <p class="yy"> Really I didn’t find the problem you mentioned </p> <p class="yy"> <br> The result of this code is: And I want the result to be: The length of the border lines below the few <li> are different </p> <br> Browse Browser problem, set the border-bottom-width value to a larger value and the effect will be more obvious <br> <p class="sougouAnswer"> <br> Browser problem, set the border-bottom-width value to a larger value and the effect will be more obvious</p> <br> I have set that one but it is too thick. What I want is not the effect. I also have a set of codes that can achieve the effect I said. <html> <br> <head> <br> <title> No form required menu</title> <br> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <br> <style> <br> <br> body{ <br> background-color:#ffdee0; <br> } <br> #navigation { <br> width:200px; <br> font-family:Arial; <br> } <br> #navigation ul { <br> list-style-type:none; /* Do not display bullets */ <br> margin:0px; <br> padding:0px; <br> } <br> #navigation li { <br> border-bottom: 1px solid #ED9F9F; /* Add underline */ <br> } <br> #navigation li a{ <br> display:block; /* Block display */ <br> padding:5px 5px 5p x 0.5em; <br> text-decoration:none; <br> border-left:12px solid #711515; /* thick red edge on the left */ <br> border-right:1px solid #711515; /* shadow on the right */ <br> } <br> #navigation li a:link, #navigation li a:visited{ <br> background-color:#c11136; <br> color:#FFFFFF; <br> } <br> #navigation li a:hover{ /* When the mouse passes over */ <br> background-color:#990020; <br> </head> <br> <body> <br> <div id="navigation"> <br> /www.baidu.com">Home</a></li> <br> <li><a href="#">Friends</a></li> <br> <li><a href="#">Next Station</a></ li> <br> ;/body> <br> </html> <br> But I don’t know why the set I posted before can’t achieve this effect <br> <br> Think of a box model for each element, you can search it. The borders on the four sides actually intersect, so each border is a trapezoid instead of a rectangle. This is the reason why you thought about the first style. You can see it clearly through the example above that increases the border-bottom. There are examples on the Internet of using this feature to create pure CSS triangles. <br> Your second style is to avoid the impact of the padding of the inner layer a on the border by setting the border-bottom of the outer layer li. <br> You can also try to achieve the border effect by setting the background of ul and the margin of li. Click to view the online demonstration <br> <br> But I don’t know why the set sent before could not achieve this effect <br> <br>
