Question

我试图让4个圆圈相互交错（没有背景颜色，只有边框颜色），最后一个使用CSS。

关于如何做到这一点的任何想法？

Answer 1

你走了。这应该可以帮助您入门。

＆＃13;

.circle {
  border-radius: 50%;
  background: transparent;
  border: 2px solid red;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c2 {
  width: 400px;
  height: 400px;
  border-color: blue;
}

.c3 {
  width: 300px;
  height: 300px;
  border-color: yellow;
}

.c4 {
  width: 200px;
  height: 200px;
}

＆＃13;

<div class="circles">

  <div class="circle c1">
    <div class="circle c2">
      <div class="circle c3">
        <div class="circle c4"></div>
      </div>
    </div>
  </div>

</div>

＆＃13;

Answer 2

它是一种造型，所以不要乱用内部HTML代码。 CSS Gradients可以做得很好。它甚至可以动画

＆＃13;

	.container {
		display: inline-block;
		height: 12em;
		width: 12em;
		padding: 4em;
		text-align: center;
		background: radial-gradient(circle closest-side, 
			hsla(  0, 80%, 80%, 0) 0%, 
			
			hsla(  0, 80%, 80%, 0) 78%, 
			hsla(  0, 80%, 80%, 1) 79%, 
			hsla(  0, 80%, 80%, 1) 82%, 
			hsla(  0, 80%, 80%, 0) 83%,
			
			hsla(100, 80%, 80%, 0) 87%,
			hsla(100, 80%, 80%, 1) 88%,
			hsla(100, 80%, 80%, 0) 89%,
			
			hsla(200, 80%, 80%, 0) 92%,
			hsla(200, 80%, 80%, 1) 93%,
			hsla(200, 80%, 80%, 0) 94%,
			
			hsla(300, 80%, 80%, 0) 97%,
			hsla(300, 80%, 80%, 1) 98%,
			hsla(300, 80%, 80%, 0) 99%
		)
		;
	}

＆＃13;

	<div class="container">
	My inner text is here
	</div>

＆＃13;

Answer 3

只需将所有圆圈放在彼此的顶部即可。

＆＃13;

 #outer-circle {
   border: 1px solid red;
   border-radius: 50%;
   height: 500px;
   width: 500px;
   position: relative;
   text-align: center;
 }
 #inner-circle {
   position: absolute;
   border: 1px solid red;
   border-radius: 50%;
   height: 480px;
   width: 480px;
   top: 50%;
   left: 50%;
   margin: -240px 0px 0px -240px;
 }
 #inner-circle2 {
   position: absolute;
   border: 1px solid red;
   border-radius: 50%;
   height: 460px;
   width: 460px;
   top: 50%;
   left: 50%;
   margin: -230px 0px 0px -230px;
 }
 #inner-circle3 {
   position: absolute;
   border: 1px solid red;
   border-radius: 50%;
   height: 440px;
   width: 440px;
   top: 50%;
   left: 50%;
   margin: -220px 0px 0px -220px;
 }
 #text {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 }

＆＃13;

<div id="outer-circle">
  <div id="inner-circle">
    <div id="inner-circle2">
      <div id="inner-circle3">
         <div id="text">Breathe out</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

这是我的版本。
我的逻辑分为两步：

第一步：
.circle-1被设置为相对于孩子的div的容器。

第二步 div的其余部分被设置为绝对，并且他们的父亲拥有最小的填充，因为他们的父母远离儿子。 x轴上的对齐由left和right设置为0，将margin设置为0 auto。
y轴的对齐方式由top:50%和transform:translateY(-50%)设置。

＆＃13;

div{
  position: absolute;
  border: 3px solid;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  left:0;
  right:0;
  top: 50%;
  transform: translateY(-50%);
  margin:0 auto;
}
.circle-1{
  top: 200px;
  padding: 40px;
  position: relative;
}
.circle-2{
  padding: 30px;
  border-color: blue;
}
.circle-3{
  padding: 20px;
}
.circle-4{
  padding: 10px;
}

＆＃13;

<div class="circle-1">
  <div class="circle-2">
    <div class="circle-3">
      <div class="circle-4"></div>
    </div>
  </div>  
</div>

＆＃13;

Answer 5

在我拖延的时候弄乱了这个。

垂直响应，基本悬停效果。

＆＃13;

Google Play Games App

＆＃13;

Google API console

＆＃13;

<强>拨弄

https://jsfiddle.net/Hastig/9v4mLdep/

使用css在彼此内创建4个圆圈

5 个答案: