html - CSS Sprite 表选择的边框背景

Question

有什么方法可以给透明的 spritesheet 添加边框吗？

假设我有这个:

.sq {
  background-image: url(https://cdn1.imggmi.com/uploads/2019/2/1/e2a2c021dba58c1a7c98252d3b1a6568-full.png);
  height: 32px;
  background-position: left -160px top -32px;
  width: 32px;
}

<div class="sq"></div>

我该怎么做才能在它的透明边缘添加一个 2px 的小黄色边框？我知道我可以将其设为棕褐色或色调/饱和度...但我还没有找到在 spritesheet 上设置边框的方法。

我想要图像本身的边框。不是 DIV 或容器。

Answer 1

添加过滤器:在你的类中添加阴影
过滤器:阴影(2px 1px 0 黄色)
drop-shadow(-1px -1px 0 yellow); 它会起作用

.sq {
  background-image: url(https://cdn1.imggmi.com/uploads/2019/2/1/e2a2c021dba58c1a7c98252d3b1a6568-full.png);
  height: 32px;
  background-position: left -160px top -32px;
  width: 32px;
  -webkit-filter: drop-shadow(2px 1px 0 yellow)
                  drop-shadow(-1px -1px 0 yellow);
  filter: drop-shadow(2px 1px 0 yellow) 
          drop-shadow(-1px -1px 0 yellow);
}

<div class="sq"></div>