如何使我的角落變圓？

Question

在此設計中，我將CSS設置為具有圓角，但只有頂部的兩個角沒有。 如何使它們也四舍五入？

 .pricing-page li { width: 32%; float: left; text-align: center; display: inline-block; box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19); background-color: red; margin-right: 10px; border-radius: 10px; } 

 <ul class="pricing-page"> <li class="animated bounceInLeft delay-250"> <div style="background-color: #0169b2"> <div style="text-align: left; width: 10%; padding: 5px 0 0 5px;"><img src="assets/images/image.png"></div> <h5>Dedicated Server</h5> <p>There are many variations of passages of Lorem Ipsum available.</p> <span><b>From</b></span> <div class="price">80$<span>/month</span></div> </div> <div> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </li> </ul> 

Answer 1

您必須為ul內嵌套的div設置border-radius ：div的background-color為#0169b2 ，如下所示：

 ul.pricing-page div{ border-top-left-radius: 10px; border-top-right-radius: 10px; } .pricing-page li { width: 32%; float: left; text-align: center; display: inline-block; box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19); background-color: red; margin-right: 10px; border-radius: 10px; } 

 <ul class="pricing-page"> <li class="animated bounceInLeft delay-250"> <div style="background-color: #0169b2"> <div style="text-align: left; width: 10%; padding: 5px 0 0 5px;"><img src="assets/images/image.png"></div> <h5>Dedicated Server</h5> <p>There are many variations of passages of Lorem Ipsum available.</p> <span><b>From</b></span> <div class="price">80$<span>/month</span></div> </div> <div> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </li> 

Answer 2

您可以將border-radius: 10px 10px 0 0設置為父div

 .pricing-page li { width: 32%; float: left; text-align: center; display: inline-block; box-shadow: 1px 1px 22px rgba(157, 184, 209, 0.19); background-color: red; margin-right: 10px; border-radius: 10px; } 

 <ul class="pricing-page"> <li class="animated bounceInLeft delay-250"> <div style="background-color: #0169b2; border-radius: 10px 10px 0 0;"> <div style="text-align: left; width: 10%; padding: 5px 0 0 5px;"><img src="assets/images/image.png"></div> <h5>Dedicated Server</h5> <p>There are many variations of passages of Lorem Ipsum available.</p> <span><b>From</b></span> <div class="price">80$<span>/month</span></div> </div> <div> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </li> </ul>