在CSS中使用1 div重疊圓圈

Question

我想在CSS中創建這個重疊的圓形：

基本上，只是堆積圓圈。 我環顧四周，我看到的所有解決方案都包括使用多個div元素來實現此效果。 但是，使用CSS3不能用一個div來完成嗎？ 我看着它是如何輕松完成的，並且認為如果所有顏色都相同，你就會得到這樣的葯丸形狀：

http://jsfiddle.net/5wytm0r4/

  #circles { background-color: red; width: 130px; height: 100px; border-radius: 50px; } 

 <div id="circles"></div> 

然后簡單地在其中繪制幾個四分之一的衛星，然后就完成了。 但是，我無法弄清楚如何在我的膠囊形狀的div中繪制這些月亮形狀。

Answer 1

使用CSS框陰影

您可以在圓角div上使用多個具有多種顏色的框陰影 。 它們需要用逗號分隔：

 #circles { background-color: red; width: 100px; height: 100px; border-radius: 50%; box-shadow: 10px 0 0 -2px #f8ff00, 20px 0 0 -4px #009901, 30px 0 0 -6px #3531ff; } 

 <div id="circles"></div> 

輸出：

瀏覽器對框陰影的支持是IE9 +（有關更多信息，請參閱canIuse ）

---

您還可以根據具有vw單位的視口寬度使重疊圓形狀響應 ： DEMO

 #circles { background-color: red; width: 20vw; height: 20vw; margin: 0 auto; border-radius: 50%; box-shadow: 2vw 0 0 -0.4vw #f8ff00, 4vw 0 0 -0.8vw #009901, 6vw 0 0 -1.2vw #3531ff; } 

 <div id="circles"></div> 

瀏覽器對vw單元的支持是IE9 +（有關更多信息，請參閱canIuse ）

---

隨着SVG

另一種方法是使用帶有<circle>元素的內聯svg 。
這是根據父級的大小響應， 瀏覽器支持回到IE9像盒子陰影：

 svg{width:80%;} 

 <svg viewbox="0 0 100 30"> <circle cx="59" cy="15" r="8.5" fill="darkorange" /> <circle cx="56" cy="15" r="9" fill="gold" /> <circle cx="53" cy="15" r="9.5" fill="tomato" /> <circle cx="50" cy="15" r="10" fill="teal" /> </svg> 

我還擴展了SVG版本，制作了一個帶有更多重疊圓圈的動畫“蠕蟲”。 你可以在這支筆中看到它： 動畫蠕蟲

它看起來像這樣：

Answer 2

可以將CSS3多個背景圖像和徑向漸變一起使用：

 #circles { width: 115px; height: 100px; background-image: radial-gradient(circle at 50px 50px, #F00 0, #F00 50px, transparent 50px), radial-gradient(circle at 55px 50px, #FF0 0, #FF0 50px, transparent 50px), radial-gradient(circle at 60px 50px, #080 0, #080 50px, transparent 50px), radial-gradient(circle at 65px 50px, #00F 0, #00F 50px, transparent 50px); } 

 <div id="circles"></div> 

Answer 3

或者，如果你感到瘋狂，你可以制作一個svg並將其作為背景圖像內聯使用：

 #circles { width: 120px; height: 100px; background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle fill='blue' cy='50' cx='70' r='50' /><circle fill='green' cy='50' cx='65' r='50' /><circle fill='yellow' cy='50' cx='60' r='50' /><circle fill='red' cy='50' cx='55' r='50' /></svg>"); } 

 <div id="circles"></div> 

Answer 4

你可以通過像:: before和:: after之類的偽選擇器來實現這一點，你可以找到jsfiddle https://jsfiddle.net/zakirshaik/jL78m9d1/6/ 。

您可以為代碼添加陰影以增加圓圈數。

 .circle-overlaping{ width: 100px; height: 100px; background-color: red; border-radius: 50%; position:relative; } .circle-overlaping::before{ content: ''; position: absolute; top: 0; left: 20px; background-color: yellow; width: 100px; height:100px; border-radius: 50%; } .circle-overlaping::after{ content: ''; position: absolute; top: 0; left: 40px; background-color: blue; width: 100px; height:100px; border-radius: 50%; } 

 <div class="circle-overlaping"> </div>