Question

我有一个缩略图库，每个<a>元素都有一个轮廓围绕它们，当我点击其中一个链接时，轮廓明显更短（只有一两个像素但足以令人讨厌）比周围的元素

指向codepen的链接 - http://codepen.io/Davez01d/pen/NxMzYy?editors=1100

这是html -

<div class="row vert-space-30"><!--row-->
      <div id="padding-helper"><!--padding-helper-->
        <div class="col-sm-3 col-xs-6 port-tile text-center">
          <a class="thumbnail" href="http://codepen.io/Davez01d/full/obyBbz/" target="_blank">
            <img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/f043ed05-0df8-42b9-a7b3-57ad6cab5f3b_zpsq2074gko.png" alt="Pomodoro thumbnail"/>
            <div class="caption">  
              <h4>Pomodoro Timer</h4>
              <p class="tech-used">JavaScript, jQuery, HTML, Css</p>
            </div>
          </a>
        </div>
        <div class="col-sm-3 col-xs-6 port-tile text-center">
          <a class="thumbnail" href="http://codepen.io/Davez01d/full/JGvdxX/" target="_blank">
            <img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/726c239e-157c-4e4d-8931-77f3a4c9de9c_zpslofzlecy.png" alt="Calculator thumbnail"/>
            <div class="caption">  
              <h4>JavaScript Calculator</h4>
              <p class="tech-used">JavaScript, jQuery, HTML, Css</p>
            </div>
          </a>
        </div>
        <div class="col-sm-3 col-xs-6 port-tile text-center">
          <a class="thumbnail" href="http://codepen.io/Davez01d/full/gPegpd/" target="_blank">
            <img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/e9b19619-ed3c-4149-ab15-0a039c59f5a7_zps7vmaslo8.png" alt="Quote generator thumbnail"/>
            <div class="caption">  
              <h4>Random Quote Generator</h4>
              <p class="tech-used">jQuery, twitter API</p>
            </div>
          </a>
        </div>
        <div class="col-sm-3 col-xs-6 port-tile text-center">
          <a class="thumbnail" href="http://codepen.io/Davez01d/full/KVQzwr/" target="_blank">
            <img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/cc4d40ed-a085-43d6-9dde-90c59161b023_zps0ppintnt.png" alt="Web sketchpad thumbnail"/>
            <div class="caption">  
              <h4>Web Sketchpad</h4>
              <p class="tech-used">jQuery, HTML, CSS</p>
            </div>
          </a>
        </div>
      </div><!--padding-helper-->
    </div><!--row-->

和css-

.port-tile a {
  z-index: 0;
  position: relative;
  border-radius: 0;
  border: none;
  padding: 0;
  outline: 3px solid #d63c20;
  transition: all .12s ease;
}
.port-tile a:hover {
  z-index: 10;
  outline: 3px solid #d63c20;
  transform: scale(1.12, 1.12);
}
.port-tile a:active, a:focus {
    outline: 3px solid #d63c20;
}

另外请注意，我发现很难找到链接，按钮等所有引导效果的列表，是否有一个很好的资源呢？它会帮助我很多。

Answer 1

我相信你指的是a:focus { outline-offset: -2px; }，这导致了这个：

您可以使用自己的风格覆盖它，只需设置

即可

a:focus {
    outline-offset: 0;
}

如果您根本不需要此规则。或者，将您要删除的特定元素作为目标。

引导链接区域在焦点和活动时较小？

1 个答案: