如何使用 css 为圆角边框赋予顶部和底部不同的颜色？

Question

我想放置带有不同边框颜色的圆角边框的图标。根据需要链接图像。我使用 tailwind css class 设计了圆角，我不知道如何给出不同的边框颜色。

enter image description here

Answer 1

这是一个使用两个 div 元素的非常简单的示例。

.outer {
  height: 100px;
  width: 100px;
  background: linear-gradient(blue, purple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  height: 90px;
  width: 90px;
  background-color: white;
  display: block;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="outer">
  <div class="inner">F</div>
</div>
<p>Facebook</p>

JSFiddle

如何使用 css 为圆角边框赋予顶部和底部不同的颜色？

How to give top and bottom different color for rounded borders using css?

html

css

font-awesome

border-radius