Html 在图像上添加边框线

如何在此图像上添加边框线

我想加两条垂直线，两条水平线。这就是我想要做的

我想用边界线填充图像之间的空间。但我不希望这些行是可点击的

我正在尝试这样做：

代码：

.包裹{ 位置：相对位置； 宽度：606px； 高度：606px； 边缘顶部：45像素； 溢出：隐藏； 边界半径：25px； 边框：3px实心0059dd； 框大小：边框框； 背景：urlhttps://i.imgur.com/2Zy1Rwz.png 无重复0-600px； } .wrap.nav{ 保证金：0； 填充：0； 列表样式：无； } .wrap.nav li{ 保证金：0； 填充：0； 浮动：左； } .wrap.nav li{ 浮动：左； 宽度：198px； 高度：198px； 利润率：0.3px 0； 背景：rgba0,0,0,0.2； } .wrap.nav li:nth-of-type3n+2{ 利润率：0.3px 0.3px； } .wrap.nav li:类型n+7的第n个{ 页边距底部：0； } .wrap.nav li svg{ 位置：绝对位置； 排名：0； 左：0； 右：0； 底部：0； 光标：指针； 填充：透明； 背景：rgba0,0,0,0.2； } .wrap.nav li svg：悬停路径{ 填充：0059dd； } iframe{ 位置：绝对位置； 排名：0； 左：0； 光标：指针； } .wrap.playa， B.playinga{ 保证金：0； } .wrap.playb， .播放{ 利润率：0.201px 0； } .wrap.playc， .播放{ 边际：0 402×0； } .wrap.playd， .播放{ 利润率：201px 0； } .wrap.playe， .播放{ 保证金：201px 201px 0； } .wrap.playf， .播放{ 保证金：201px402px0； } .wrap.playg， .播放{ 利润率：402px0； } .wrap.play， Playing先生{ 利润率：402×201px 0； } .wrap.playi， B.playingi{ 保证金：402px402p0； } .隐藏{ 显示：无； } 使用这个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;
               }

---

发布一张显示您正在尝试执行的操作的图像如何？我正在尝试这样做：为什么重复相同的问题？添加svg{border bottom:2.5px solid red；border right:2.5px solid red；}并将您的外部边框更改为红色此答案并没有解决您的问题？在你的css中使用这个css，你可能会得到答案和修改