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

Question

我想放置具有不同边框颜色的圆形边框图标。根据需要链接图像。我使用顺风 css 类设计了圆角，我不知道如何赋予不同的边框颜色。

在此处输入图像描述

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