刪除內部的圓線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

回答

相關問題