需要使用CSS样式绘制两个具有相同原点（相同中心点）的圆

Question

我需要显示2个不同宽度和高度的圆圈，但是圆圈应该从相同的原点（相同的中心）开始，这意味着即使我改变两个圆圈的大小，它们应该看起来相同，大小不同。

我在互联网上看到了一些例子，问题是当我改变宽度时，两个圆圈的高度中心点不再相同。

此外，当我悬停时，他们必须通过平滑过渡来增加尺寸。

我猜我需要两个圆圈才能画出这样的东西，如果我们只用一个圆圈画画就请告诉我。

外圈细节：

内圈

width: 97.33px;
height: 97.33px;
color: #DEBF43;
opacity: 74%;
shadow: #D7E0F1, 100%;
blur: 30px;
x - 0px //no idea but is mentioned in requirement
y 10px //no idea but is mentioned in requirement

外圈细节：

width: 79.49
height: 79.49
shadow: #000000,15%;
blur: 6px;
opacity: 100%;
X - 0px //no idea but is mentioned in requirement
y - 1px //no idea but is mentioned in requirement

谢谢，罗汉

Answer 1

我会用SVG和circles。它非常简单，易读。获得两个不同半径的圆圈，并通过Javascript操纵它们。只是覆盖r属性。

这是Vue的一个简单示例：

new Vue({
  el: '#app',
  data: {
    r1: 120,
    r2: 90,
  }
});

/* circles */

.circle--1 {
  fill: yellow;
}

.circle--2 {
  fill: orange;
}

.transparent {
  opacity: 0.4;
}

/* demo stuff */

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: flex-start;
  background: #ccc;
  height: 100vh;
}

.svg, aside {
  background-color: #fff;
  box-shadow: 0 0 4rem #00000033;
  margin: 1rem;
}

aside {
  width: 300px;
  height: 300px;
   display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  align-items: center;
}

label {
  display: block;
  font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app" class="container">

  <!-- svg with two circles -->

  <svg class="svg" width="300" height="300">
    <circle class="circle circle--1" cx="50%" cy="50%" r="120" stroke="black" stroke-width="2"/>
    <circle class="circle circle--2" cx="50%" cy="50%" r="90"/>
  </svg>
  
  
  <!-- demo svg with editable radii -->
  
  <svg class="svg" width="300" height="300">
    <circle id="circle-1" class="circle circle--1 transparent" cx="50%" cy="50%" :r="r1" stroke="black" stroke-width="2"/>
    <circle id="circle-2" class="circle circle--2 transparent" cx="50%" cy="50%" :r="r2"/>
  </svg>
  
  
  <!-- demo controls -->
  
  <aside>
    <section>
        <label for="radius1">Radius 1 ({{r1}}px)</label>
        <input type="range" id="radius1" min="0" max="140" v-model="r1">
    </section>
    <section>
      <label for="radius2">Radius 2 ({{r2}}px)</label>
      <input type="range" id="radius2" min="0" max="140" v-model="r2">
     </section>    
  </aside>  
  
</main>

Answer 2

这是一个简单的想法，您可以依赖多个背景。诀窍是使渐变仅覆盖内容框并使用填充控制空间：

.box {
  width:100px;
  height:100px;
  border-radius:50%;
  border:5px solid;
  padding:20px;
  background:
    linear-gradient(orange,orange) content-box,
    yellow;
}

<div class="box">

</div>

或者像radial-gradient一样

.box {
  width:100px;
  height:100px;
  border-radius:50%;
  border:5px solid;
  padding:20px;
  background:
    radial-gradient(farthest-side,orange 60%,yellow 61%);
}

<div class="box">

</div>