在 div 的底部应用不同颜色的边框

Question

我有一个模式，其中底部 10% 左右的颜色与顶部的颜色不同，并且无法将边框应用到底部，现在它显示为这样

我的目标是在此处为边框实现这种样式

.feature-pending {
  border: toRem(1px) solid $border-gray;
}

.feature-pending-footer {
  position: relative;
  background-color: $primary-blue;
  min-height: toRem(61px);
  &__body {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }
}

<div class="feature-pending">
  <h1 class="feature-pending__header">
    Attention!
  </h1>
  <p class="feature-pending__body">
    The Feature is pending generation of your Townify Home Keyword. If you are a new user please allow 1-2 business days from the day you created your account. if you are not a new user please <a class="feature-pending__contact-support" href="">
            contact support</a> for assistance.
  </p>

  <div class="feature-pending-footer">
    <p class="feature-pending-footer__body">Dismiss</p>
  </div>
</div>

Answer 1

.feature-pending {
  border-radius:3px;
}

.feature-pending-footer {
  position: relative;
  background-color: $primary-blue;
  min-height: toRem(61px);
  *border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;*
  &__body {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }
}
<div class="feature-pending">
  <h1 class="feature-pending__header">
    Attention!
  </h1>
  <p class="feature-pending__body">
    The Feature is pending generation of your Townify Home Keyword. If you are a new user please allow 1-2 business days from the day you created your account. if you are not a new user please <a class="feature-pending__contact-support" href="">
            contact support</a> for assistance.
  </p>

  <div class="feature-pending-footer">
    <p class="feature-pending-footer__body">Dismiss</p>
  </div>
</div>

我认为你不能解决这个问题，因为边框，你需要删除

border: toRem(1px) solid $border-gray

并添加 border-radius ，如果需要的话

在 div 的底部应用不同颜色的边框

applying different color border to bottom of div

html

css

border

sass