Html 如何删除我与背景图像链接中的丑陋边框？

我正在制作一个带有背景图像的导航菜单。我设法用文本缩进消除了文本，但在单击链接时它显示了一个非常难看的边框。我如何摆脱边境？我的css在下面是gven

       #menu{
  width:670px;
  float:right;
      }

    #menu ul{
    padding-top:10px;
     }
      #menu ul li{
        list-style-type:none;
     display: block;
      float:left;
    width:163px;
     height:270px;
     }

   #menu ul li a{
   height:270px;
    display: block;
    width:163px;
    text-indent:-9999px;
    border:none;
      }
     .box_1{
      background: url(images/box_1.png) no-repeat;
      width:163px;
     height:268px;
     border:none;
     }

     .box_2{
    background: url(images/box_2.png) no-repeat;
    width:163px;
    height:268px;
    border:none;
       }

    .box_3{
     background: url(images/box_3.png) no-repeat;
     width:163px;
    height:268px;
    border:none;
     }

     .box_4{
     background: url(images/box_4.png) no-repeat;
     width:163px;
     height:268px;
     border:none;
     }

和我的html：

<div id="menu">
<ul>
<li><a class="box_1" href="#">creative solutions</a></li>
 <li><a class="box_2" href="#">dynamic development</a></li>
 <li><a href="#" class="box_3">unlimited opportunities</a></li>
 <li><a  class="box_4" href=#">exceptional approach</a></li></ul>
 </div>

提前谢谢你的帮助

虚线的事情

---

a{outline:0}

你指的是虚线轮廓？按如下方式移除它：

a {
   outline: 0;
}

---

您可能需要添加另一种焦点样式。请参阅。

应用另一种css样式：

#menu ul li a:active {
    border:none;
}

---

可能您正在谈论的是当元素（在您的案例图像中）接收到焦点（通过单击或按tab键）时显示的丑陋虚线边框

使用css属性：

outline: none;

---

在css文件的顶部尝试这一行

* :focus { outline: 0; }

---

呃，请不要去掉那个。这就是为什么我知道一个特定的链接目前有焦点。嗯。。。它出现在整个屏幕上，看起来很糟糕！！很抱歉我认为有两种情况是否删除它：（1）如果它点击网站徽标，进入网站主页，用户点击“后退”，那么徽标可能有虚线轮廓，看起来很难看，在这种情况下，它可以被视为删除。（2） 如果它是一个很长的项目列表，那是真的，我确实希望看到我以前单击的内容，因此作为一个用户，我宁愿它保留。嗨，是的，虚线的东西。我尝试设置大纲，但没有工作！你说它不工作是什么意思？你不是在说img边界吧？img{border:none；}不，当然不是。我说的是当链接有焦点时，它得到的边界。设置大纲不起作用，但当我将a:active设置为border:none时，它起作用了！设置：活动{outline:0；}也可以吗？也许我们在谈论不同的边界。@Snowbell92-Awesome:）别忘了单击复选标记来识别它。我看到你还有几个问题没有找到答案，很快你发布问题时就会显示你的接受度。