在css中使用svg绘制圆形形状

Question

如何使用 CSS 来实现这一点？ （下图）

Answer 1

我建议您从学习 CSS 基础知识开始，但要回答您的问题，您应该使用 CSS 的

::before

和

::after

伪元素。

看这个例子：

.circle-sketch-highlight {
  position: relative;
}

.circle-sketch-highlight::before {
  content: "";
  z-index: -1;
  left: -0.5em;
  top: -0.1em;
  border-width: 2px;
  border-style: solid;
  border-color: skyblue;
  position: absolute;
  border-right-color: transparent;
  width: 100%;
  height: 1em;
  transform: rotate(2deg);
  opacity: 0.7;
  border-radius: 50%;
  padding: 0.1em 0.25em;
}

.circle-sketch-highlight::after {
  content: "";
  z-index: -1;
  left: -0.5em;
  top: 0.1em;
  padding: 0.1em 0.25em;
  border-width: 2px;
  border-style: solid;
  border-color: skyblue;
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  width: 100%;
  height: 1em;
  transform: rotate(-1deg);
  opacity: 0.7;
  border-radius: 50%;
}

<p>This is <span class="circle-sketch-highlight">Highlight Me</span> example</p>