outline轮廓被覆盖outline-offset优化实例页面

展示

代码

• HTML：

  <h4>有问题的</h4>
  <p>
      <img src="wallpaper-1.jpg">
      <img src="wallpaper-2.jpg">
      <img src="wallpaper-3.jpg">
  </p>
  <h4>优化后的</h4>
  <p class="outline-offset">
      <img src="wallpaper-1.jpg">
      <img src="wallpaper-2.jpg">
      <img src="wallpaper-3.jpg">
  </p>

• CSS：

  p img {
      width: 100px; height: 136px;
  }
  p img:hover,
  p img:active {
      outline: solid deepskyblue;
  }
  .outline-offset img {
      outline-offset: -3px;
  }