logo标签列表

如何去除 div 周围的蓝色边框？

htmlcss
3

我想确认有哪些方法可以移除匿名的蓝色轮廓。

<div class="profile">

  <a href="" data-toggle="modal" data-target="#myModal" style="border-width:none;">
    <img class="img-circle" src="{{asset('images/user-profile1.jpg')}}" alt="mayor" style="border:5px solid #bfbfbf; ">
    <div style="text-align:center;">
      <h3>john</h3>
    </div>
  </a>
</div>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

enter image description here

请在JSFiddle或CodePen上更新此内容。 - Jishnu V S
2
你可以使用 outline: none;。 - Ionut Necula
.profile img{border:0} - Sravan
1个回答
13

这不是一个边框，而是一个轮廓线。它只会在某些浏览器上出现，比如谷歌浏览器。你可以使用以下方法去除它：

img{ outline: none; }
@lonut 不起作用。 - sting
那个边框是在什么时候出现的？是在页面加载时还是在元素点击/聚焦时？你使用的是哪个浏览器？ - Ionut Necula
@lonut 我刚刚添加了 a:focus { outline: none; } 现在它可以工作了 :) - sting
这就是我问它何时出现的原因。很高兴它能正常工作。@sting，它也应该在没有焦点的情况下工作。 - Ionut Necula
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接