如何为 ngbpopover 设置边框

Question

我在 angular 工作，我已经打开了一个ngbpopover. 但我想给它的边框，如设计所示。如果有人知道该怎么做，请帮助我。

Currently my design is like this as below. But I want it as per above image.

Answer 1

这是我的问题的完美答案......

    <div class="col text-option border-right-1-white" (click)="openTextColor()"
       [ngbPopover]="colorPopContent" [placement]="['bottom-left', 'top-left']"
         popoverClass="intro-text-color-popover" [autoClose]="'outside'">
    </div>

.intro-text-color-popover {
  background: #0f1934;
  border-radius: 8px;
  max-width: 400px;
  width: 400px;
  border: 2px solid #5d98e1;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=bottom]>.arrow::after,
.bs-popover-bottom>.arrow::after {
  border-bottom-color: #0f1934;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=top]>.arrow::after,
.bs-popover-top>.arrow::after {
  border-top-color: #0f1934;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=bottom]>.arrow::before,
.bs-popover-bottom>.arrow::before {
  top: -14px;
  left: -3px !important;
  border-bottom-color: #5d98e1;
  left: calc(100% - 2px);
  border-width: 11px;
}

.intro-text-color-popover .bs-popover-auto[x-placement^=top]>.arrow::before,
.bs-popover-top>.arrow::before {
  bottom: -13px;
  left: -3px;
  border-width: 11px;
  border-top-color: #5d98e1;
}

.intro-text-color-popover {
    width: 320px;
  }

这就是我的完整设计。