html - 如何创建只是轮廓的框阴影？

Question

我如何使用 html 和 css 创建类似于上面链接的内容？每次我试着把它变成一条细线，比如 (box-shadow: 10px 10px 1px #FFE600;) 它就消失了。我只需要为此创建一个单独的 div 吗？

这是我当前的代码:HTML

<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">

CSS

.pageimg {
    width: 37%;
    float: right;
    margin-left: 100px;
    box-shadow: 10px 10px #FFE600;
}

Answer 1

使用多个框阴影:

img {
  box-shadow:
   12px 8px 0 0px white,
   14px 6px 0 0px yellow,
   14px 10px 0 0px yellow,
   10px 10px 0 0px yellow;
}

<img src="https://picsum.photos/200/200?image=1069">