如何让我的角落圆润？

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

您必须将border-radius设置为嵌套在div内的ul：background-color #0169b2的div，如这样：

＆＃13;

＆＃13;

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;
}    

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将border-radius: 10px 10px 0 0设置为父div

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;