Question

我有一个span元素，如下所示 -

<span class="tick"></span>

这基本上会产生一个＆＃34; tick＆＃34;一个复选框。

CSS如下 -

input[type="checkbox"] + span > span.tick {
    display: block;
    position: absolute;
    z-index: 2;
    top: -3px;
    left: -1px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url(/content/dam/oe_tick.png);
    background-size: 18px;
    background-position: 3px 1px;
}

我想在图片周围添加阴影 - /content/dam/oe_tick.png。有可能吗？

提前致谢！

Answer 1

我终于找到了答案。实现此目的的一种方法是使用CSS过滤器（https://www.w3schools.com/cssref/css3_pr_filter.asp）。

span.tick {
    -webkit-filter: drop-shadow(0px 2px 0px rgba(244, 247, 249, 1));
    filter: drop-shadow(0px 2px 0px rgba(244, 247, 249, 1));
}

我成功地在刻度线周围添加了一个阴影。

背景图像的阴影

1 个答案: