时间戳

首页 > 解决方案 > 将不同颜色的边框应用到 div 的底部

html - 将不同颜色的边框应用到 div 的底部

问题描述

我有一个模态，其中底部 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>

标签： htmlcsssassborder

解决方案

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

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

边框：toRem(1px) 实心 $border-gray

并添加边框半径，如果你需要的话

推荐阅读