删除内部的圆线div

我有四个圆圈在每个圆圈中的一个图标存在于圆圈的中间。我在CSS中使用伪类绘制红线。这条红线横跨中间。我只想说这条红线不会显示在圈内，但显示出侧circle.i想了很多，但无法找到任何解决方案的删除内部的圆线div

#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>

来源

2016-06-13 Hamza Qaisrani

添加这两个设置：

#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>

来源

2016-06-13 00:13:19 Johannes

简单地改变行的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-color: white; 
 
} 
 
#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: -99; 
 
}

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

来源

2016-06-13 00:12:28 4m1r

删除内部的圆线div

回答

相关问题