无图像的圆角问题

Question

有人可以向我解释为什么底部的角落没有扩大与div blockdark（高度：617px;）？ 角落只扩大至文本的结束的div内（container5）

这是CSS：

.container5 {background:#666666; color:#fff; margin:0 15px;} 

.rbottom{display:block; background:#f57f20;} 
.rtop{display:block; background:#eaeade;} 
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#666666;} 
.r1{margin: 0 5px} 
.r2{margin: 0 3px} 
.r3{margin: 0 2px} 
.r4{margin: 0 1px; height: 2px} 

.rl1 {margin: 0 0 0 5px; } 
.rl2 {margin: 0 0 0 3px; } 
.rl3 {margin: 0 0 0 2px; } 
.rl4 {margin: 0 0 0 1px; height: 2px;} 

.rr1 {margin: 0 5px 0 0; } 
.rr2 {margin: 0 3px 0 0; } 
.rr3 {margin: 0 2px 0 0; } 
.rr4 {margin: 0 1px 0 0; height: 2px;} 




div#blockdark { 
height: 617px; 
left: 468px; 
position: absolute; 
top: 150px; 
z-index: 1000000; 
width: 300px; 
overflow: visible; 
visibility: visible; 

} 

Thisi S中的HTML：

<div id="blockdark"> 
<!--Begin custome code--> 
<div class="container5"> 
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b> 
<p>Sed do eiusmod tempor incididunt ullamco laboris nisi ut labore et dolore 
magna aliqua. Quis nostrud exercitation qui officia deserunt ut enim ad minim 
veniam. In reprehenderit in voluptate mollit anim id est laborum. Duis aute 
irure dolor consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p> 

<p>Lorem ipsum dolor sit amet, qui officia deserunt cupidatat non proident. 
Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p> 
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> 
</div> 
<!--End custome code--> 

</div> 

Answer 1

因为他们是在正常流量。

您需要将每个靠近元素底部的位置。

position: absolute; 
bottom: 0;