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

Question

如何使用html和css创建类似上面的链接的内容？每当我尝试使其变成一条细线时（框阴影：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

您也可以使用伪元素。我确实建议将图像保存在容器中，因为这样可以更轻松地使用它们。看起来像这样。

.image-container{
    position: relative;
    display: inline-block;
}
.image-container::before{
    content: '';
    position: absolute; 
    border: solid 1px yellow;
    width: 100%;
    height: 100%;
    left: 14px; /* This will be your box shadow x-offset; */
    top: 14px; /* This will be your box shadow y-offset; */
    z-index: 0;
}

然后是您的html

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

Answer 2

使用多个框阴影：

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">