使用 CSS 生成内圈和外圈答案

【问题标题】：Using CSS to generate inner and outer circles使用 CSS 生成内圈和外圈
【发布时间】：2016-02-12 20:10:18
【问题描述】：

按照指南here，我一直致力于使用 CSS 生成圆圈。我已经完成了基础知识，但我一直试图将一个 CSS 生成的圆圈叠加在另一个圆圈之上。我的小提琴是here。

我想：

调整包含文本的内圈的位置 - 我无法让它在外圈上正确排列。这个想法是每个圆圈将由一个外圈和一个内圈组成，每个内圈都将包含适当的文本。
使文本正确排列，使其在内圈中垂直和水平居中
将所有三个圆圈放在同一水平线上。

下面粘贴的是我想让圆圈显示的方式的图像。

有人可以帮忙吗？

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;
}

【问题讨论】：

喜欢这个？ jsfiddle.net/7txCN/1
感谢您的投入，Billy，agriboz 的回答非常完美。感谢您的评论。

标签： html css

【解决方案1】：

您可以使用 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

【讨论】：

看起来棒极了，谢谢 agriboz！现在我需要阅读 box-shadow。
我很高兴能帮上忙。您可能想查看this 以增强有关box-shadow 的信息。

【解决方案2】：

给.circle { line-height: 250px; }（与您的内圈高度相同）并将内圈top和left的值更改为8px (outerCircleHeight - innerCircleHeight - bothSidesBorder / 2 = 8)。

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

jsfiddle example

【讨论】：

也是一个很好的答案，而且非常简单。谢谢墨菲斯。 Neo 也会很高兴的。