[英]How to make my corners rounded?
在此设计中,我将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>
您必须为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>
您可以将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.