Question

我在每个圆圈中有四个圆圈，圆圈中间有一个图标。我在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>

Answer 1

只需更改线条的z-index，然后在圆圈中添加白色背景。见下文。

＆＃13;

constructor Create(const DefaultPort: Word; SilentExceptions: Boolean; const AOwner: TComponent = nil);

＆＃13;

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

＆＃13;

Answer 2

添加以下两项设置：

<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; }值）并使圆圈区域不透明（即覆盖红线）

＆＃13;

z-index

＆＃13;

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

＆＃13;

删除圆div内的线

2 个答案: