526互联

如何解决图片加 border 后图片会和边框有不太明显的界限？

发布时间 2023-06-15 20:16:42作者: 蓓蕾心晴

如上图，给图片加了 border 后，无论直接给图片加，还是给图片套一个壳子加，都会有一点点不太明显的图片和边框之间的分割线，在手机看尤其明显。

勉强看不出来的解决方案：

给图片外层加 border，给图片的宽高都放大一点点，同时给外层付元素设垂直居中，外层父元素不要写 overflow：hidden ，这样图片会不加圆角展示，但是不会看到黑边，代码和效果如下：

.app-icon {
    width: 80px;
    height: 80px;
    border: 5px solid #fff;
    border-radius: 10px;
    /* 一定要这么写，否则 icon 会有一根黑边 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;

    img {
      /* 一定要这么写，否则 icon 会有一根黑边 */
      width: 102%;
      height: 102%;
    }
  }

 如果一定要给图片也带边框，则给图片单独加个 border-radius，不要给外层父元素加 overflow:hidden。

 

.app-icon {
    width: 80px;
    height: 80px;
    border: 5px solid #fff;
    border-radius: 10px;
    /* 一定要这么写，否则 icon 会有一根黑边 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;

    img {
      /* 一定要这么写，否则 icon 会有一根黑边 */
      width: 102%;
      height: 102%;
      border-radius: 10px;
    }
  }

对比下给外层父元素设 overflow：hidden 的效果：