css list problem_html/css_WEB-ITnose-HTML Tutorial-php.cn

8">

ul{ width:200px; color:white; list-style-type:none; font-family :Arial; margin:0px; padding:0px;

li{ border-left:12px solid #711515; border-right:1px solid #711515; border -bottom:1px solid #ED9F9F;

{ background-color:#ffdee0; background-color: #990020; /

li> > > How to make the running result look like this?

Reply to the discussion (solution)

Already like this The effect is Study and receive points. . . No. If you look carefully, the length of the bottom border of each is different.

No. If you look carefully, the length of the bottom border of each is different.

I really didn’t find the problem you mentioned

No, if you look carefully, the length of the bottom border of each is different

Really I didn’t find the problem you mentioned

The result of this code is: And I want the result to be: The length of the border lines below the few are different

Browse Browser problem, set the border-bottom-width value to a larger value and the effect will be more obvious Browser problem, set the border-bottom-width value to a larger value and the effect will be more obvious

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. No form required menu

body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* Do not display bullets */ margin:0px; padding:0px; } #navigation li { border-bottom: 1px solid #ED9F9F; /* Add underline */ } #navigation li a{ display:block; /* Block display */ padding:5px 5px 5p x 0.5em; text-decoration:none; border-left:12px solid #711515; /* thick red edge on the left */ border-right:1px solid #711515; /* shadow on the right */ } #navigation li a:link, #navigation li a:visited{ background-color:#c11136; color:#FFFFFF; } #navigation li a:hover{ /* When the mouse passes over */ background-color:#990020; /www.baidu.com">Home Friends Next Station ;/body> But I don’t know why the set I posted before can’t achieve this effect

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. 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. 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

But I don’t know why the set sent before could not achieve this effect