在图像上添加边框线[重复]答案

【问题标题】：Adding border lines over an image [duplicate]在图像上添加边框线[重复]
【发布时间】：2018-12-10 09:32:03
【问题描述】：

如何在这张图片上添加边框线？

我想添加两条向下的垂直线和两条交叉的水平线。这就是我想要做的。

我想用边框线填充图像之间的空间。我不希望这些线条可以点击。

我正在尝试这样做：

代码：

.wrap {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/2Zy1Rwz.png") no-repeat 0 -600px;
}

.wrap .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap .nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.wrap .nav li {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.2);
}

.wrap .nav li:nth-of-type(3n+2) {
  margin: 0 3px 0 3px;
}

.wrap .nav li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.wrap .nav li svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
  background: rgba(0, 0, 0, 0.2);
}

.wrap .nav li svg:hover path {
  fill: #0059dd;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.wrap .playa,
.playinga {
  margin: 0;
}

.wrap .playb,
.playingb {
  margin: 0 201px 0;
}

.wrap .playc,
.playingc {
  margin: 0 402px 0;
}

.wrap .playd,
.playingd {
  margin: 201px 0 0;
}

.wrap .playe,
.playinge {
  margin: 201px 201px 0;
}

.wrap .playf,
.playingf {
  margin: 201px 402px 0;
}

.wrap .playg,
.playingg {
  margin: 402px 0 0;
}

.wrap .playh,
.playingh {
  margin: 402px 201px 0;
}

.wrap .playi,
.playingi {
  margin: 402px 402px 0;
}

.hide {
  display: none;
}

<div class="wrap">

  <ul class="nav">
    <li>
      <svg class="playa" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
      <div class="hide">
        <div class="video playinga" data-id="M7lc1UVf-VE"></div>
      </div>


    </li>

    <li>
      <svg class="playb" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
      <div class="hide">
        <div class="video playingb" data-id="-QAnOs-O23c"></div>
      </div>


    </li>

    <li>
      <svg class="playc" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
      <div class="hide">
        <div class="video playingc" data-id="drNPMrdmqMQ"></div>
      </div>

    </li>

    <li>
      <svg class="playd" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
      <div class="hide">
        <div class="video playingd" data-id="EBEUhO5_Flk"></div>
      </div>


    </li>

    <li>
      <svg class="playe" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
      <div class="hide">
        <div class="video playinge" data-id="wE7khGHVkYY"></div>
      </div>

    </li>


    <li>
      <svg class="playf" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
      <div class="hide">
        <div class="video playingf" data-id="D5WkP8JZgdw"></div>
      </div>

    </li>


    <li>

      <svg class="playg" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
      <div class="hide">
        <div class="video playingg" data-id="eI43jkQkrvs"></div>
      </div>

    </li>


    <li>
      <svg class="playh" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
      <div class="hide">
        <div class="video playingh" data-id="R9C5KMJKluE"></div>
      </div>

    </li>


    <li>
      <svg class="playi" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
      <div class="hide">
        <div class="video playingi" data-id="J1gE9xvph-A"></div>
      </div>
    </li>
  </ul>


</div>

【问题讨论】：

发布一张显示您正在尝试做的事情的图片怎么样？
我正在尝试这样做：i.imgur.com/FknStjB.png
为什么要重复同样的问题？
添加 svg{border-bottom:2.5px 纯红色； border-right:2.5px solid red;} 并将外部边框更改为红色
这个答案没有解决你的问题？ stackoverflow.com/questions/53697059/…

标签： html css border

【解决方案1】：

使用这个 css

           .wrap .nav li {
            float: left;
            width: 198px;
            height: 198px;
            margin: 0 0 3px 0;
            background: rgba(0, 0, 0, 0.2);
            position:relative;
             }
             .wrap .nav li:before{
           content:" ";
           position:absolute;
           border-top:1px solid red;
           border-bottom:1px solid red;
           height:20px;
           z-index:9;
           width:100%;
           top:50%;
           }
          .wrap .nav li:after{
              content:" ";
              position:absolute;
              border-left:1px solid white;
              border-right:1px solid white;
              z-index:9;
              height:100%;
              left:50%;
              width:20px;
               }

【讨论】：

在你的css中使用这个css可能你会得到答案和修改