使用CSS生成內部和外部圓

遵循指南here，我一直在使用CSS生成圓圈。我已經完成了基礎知識，但是我試圖讓一個CSS生成的圓圈疊加在另一個圓圈上。我的小提琴是here。使用CSS生成內部和外部圓

我想：

調整包含文本的內部圈子的定位 - 我無法得到它列隊正確的外圈。這個想法是，每個圓圈將由一個外圓和一個內圓組成，每個內圓將包含適當的文字。
使文本正確排列，使其在內部圓中垂直和水平居中
在同一水平線上獲取所有三個圓。

下面粘貼的是我想讓圓圈顯示的圖像。

任何人都可以幫忙嗎？

3 circles

HTML：

<div id="law-outer-circle" class="circle"><div id="law-inner-circle" class="circle">Law firms</div></div> 
<div id="industry-outer-circle" class="circle"><div id="industry-inner-circle" class="circle">Industry</div></div> 
<div id="in-house-outer-circle" class="circle"><div id="in-house-inner-circle" class="circle">In-house counsel</div></div>

CSS：

.circle { 
border-radius: 50%; 
display: inline-block; 
margin-right: 20px; 

/* text styling */ 
font-size: 45px; 
color: #FFF; 
line-height: 75px; 
text-align: center; 
font-family: Arial; 
} 

#industry-inner-circle { 
width: 250px; 
height: 250px; 
background: #DD4814; 
position: absolute; 
top: 24%; 
left : 24%; 
display: block; 
border: 2px solid #fff; 
} 

#industry-outer-circle { 
background: #DD4814; 
width: 270px; 
height: 270px; 
position:relative; 
} 

#in-house-inner-circle { 
width: 250px; 
height: 250px; 
background: #AEA79F; 
position: absolute; 
top: 24%; 
left : 24%; 
display: block; 
border: 2px solid #fff; 
} 

#in-house-outer-circle { 
background: #AEA79F; 
width: 270px; 
height: 270px; 
position:relative; 
} 

#law-inner-circle { 
width: 250px; 
height: 250px; 
background: #5E2750; 
position: absolute; 
top: 24%; 
left : 24%; 
display: block; 
border: 2px solid #fff; 
} 

#law-outer-circle { 
background: #5E2750; 
width: 270px; 
height: 270px; 
position:relative; 
}

來源

2013-03-21 Clive van Hilten

喜歡這個？ http://jsfiddle.net/7txCN/1/ – 2013-03-21 14:49:43

謝謝您的意見比利，agriboz的答案完美的作品。感謝您的評論。 – 2013-03-21 15:01:58

你可以使用CSS box-shadow財產做這樣。

的Html

<div class="circle color-1 color1-box-shadow"> 
    industry 
</div> 
<div class="circle text color-2 color2-box-shadow"> 
    In-house legal counsel 
</div> 
<div class="circle color-3 color3-box-shadow"> 
    Law Firms 
</div>

的CSS

.circle { 
    border-radius: 50%; 
    float: left; 
    display: inline-block; 
    margin-right: 20px; 
    /* text styling */ 
    font-size: 45px; 
    width: 250px; 
    height: 250px; 
    color: #FFF; border: 2px solid #fff; 
    line-height: 250px; 
    text-align: center; 
    font-family: Arial; 
} 
.color-1 { background: #DD4814;} 
.color-2 { background: #AEA79F; } 
.color-3 { background: #5E2750; } 
.color1-box-shadow { box-shadow: 0px 0px 1px 1px #DD4814 } 
.color2-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F } 
.color3-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 } 
.text { line-height: 45px; padding-top: 50px; height: 200px }

Example

來源

2013-03-21 14:56:11 agriboz

這看起來太棒了，謝謝agriboz！現在我需要閱讀箱子陰影。 – 2013-03-21 15:00:34

我很高興能幫上忙。你可能想看看[this]（http://www.sitepoint.com/mastering-box-shadows/）以增強關於'box-shadow'的知識。 – agriboz 2013-03-21 15:04:53

給.circle { line-height: 250px; }（同您的內圓高度）和變更內圓top和left值以8像素（outerCircleHeight - innerCircleHeight - bothSidesBorder/2 = 8）。

#industry-inner-circle { 
    top: 8px; 
    left : 8px; 
}

jsfiddle example

來源

2013-03-21 14:58:53 Morpheus

太好了，非常簡單。謝謝你Morpheus。 Neo也會很開心。 – 2013-03-21 15:20:55

使用CSS生成內部和外部圓

回答

相關問題