html - 删除圆div内的线 | 删除圆div内的线

我在每个圆圈中有四个连续的圆圈，在圆圈中间存在一个图标。我在CSS中使用伪类绘制一条红线。这条红线在中间穿过圆圈。我只希望这条红线不在圆圈内显示，而在圆圈外显示。我想很多，但找不到任何解决方案

#services .block .icon-block {
    border: 4px solid yellow;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin:0 auto;
}
#services .block .icon-block a {
    font-size: 25px;
}
#services .block .upper-block::before{
    border: 2px solid red;
    content: "";
    position: absolute;
    top: 50%;
    width: 100%;
}

<html>
<head>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head
<body>
<section id="services">
    <div class="container block">
        <div class="row">
            <div class="col-sm-3 upper-block">
                <div class="icon-block">
                    <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-sm-3 upper-block">
                <div class="icon-block">
                    <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-sm-3 upper-block">
                <div class="icon-block">
                    <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-sm-3 upper-block">
                <div class="icon-block">
                    <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end (services) -->
</body>
</html>

最佳答案

添加以下两个设置：

#services .block .icon-block {
    background: #fff;
}
#services .block .upper-block::before{
    z-index: -1;
}

他们将红线移到背景（使用负的z-index值）并使圆形区域不透明（即覆盖红线）

#services .block .icon-block {
    border: 4px solid yellow;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin:0 auto;
    background: #fff;
}
#services .block .icon-block a {
    font-size: 25px;
}
#services .block .upper-block::before{
    border: 2px solid red;
    content: "";
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: -1;
}

<html>
<head>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head
<body>
<section id="services">
    <div class="container block">
        <div class="row">
            <div class="col-sm-3 upper-block">
                <div class="icon-block">
                    <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-sm-3 upper-block">
                <div class="icon-block">
                    <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-sm-3 upper-block">
                <div class="icon-block">
                    <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-sm-3 upper-block">
                <div class="icon-block">
                    <a href="#"><i class="fa fa-cloud" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end (services) -->
</body>
</html>

关于html - 删除圆div内的线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37780283/