寻找看起来自然的图像边框

本文概述

有些元素，例如缩略图和用户图标，您不知道将应用哪种图像。
我经常遇到这样的带有边框的元素，以确保可见性。

我不喜欢边框偶尔闪烁，所以我试图想办法改善它。

成品及与正常边框的比较

这是完整的图片。

自然に見える画像の枠線を求めて

我已经对差异明显的部分进行了特写。
左图中的草，中图右端的笔盒（？），以及右图中的桌子和天花板，“边框更亮”的地方很明显，或者更确切地说，看起来像噪点.成为。

自然に見える画像の枠線を求めて

这是更正的版本。
边框仅在左图中的天空和右图中的窗口等白色区域可见，其他区域使用原始图像。

自然に見える画像の枠線を求めて

CodePen 在这里。

结构体

<div class="adjusted-border"> <!-- 1 -->
  <img alt="" src="画像のパス">
</div>

.adjusted-border {
  position: relative;
}

.adjusted-border::before {
  position: absolute;
  content: "";
  inset: 0; /* 2 */
  box-shadow: 0 0 0 2px rgb(220 220 220) inset; /* 3 */
  mix-blend-mode: darken; /* 4 */
}

由于使用了伪元素，img不能单独使用，所以包裹在div中
将div 伪元素的大小指定为与内容元素相同的大小
使用box-shadow的inset，在div的区域内画一条线
将 mix-blend-mode: darken; 更改为仅在线条较暗时绘制
它有点长，但很容易。

此外，如果使用mix-blend-mode: lighten;，则可以在暗模式下绘制（仅在比图像亮的地方绘制细白线）。

感谢您阅读到最后！
我们也在推特上发送信息，所以如果你喜欢，请关注我们！

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308626063.html