框阴影不会显示在图像上

Question

我正在创建一个windows 95风格的窗口，其中包含一个图像。

我的问题：窗口内的图像应该有一个方框阴影插入，但它不会显示。

我搞不清我的代码出了什么问题。请告诉我我做错了什么。

这就是图像看起来atm的样子

这就是图像的外观

https://codepen.io/roeylu/pen/rNmmxJM

<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="window" style="width: 600px;">
<div class="title-bar">
<div class="title-bar-text" style="margin-right: 18px; font-family: 'blink'; letter-spacing: .7px;">
<b>window</b>
</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body" style="font-size: 13px; letter-spacing: .36px; word-spacing: -3px; margin: 5px 3px 3px 3px;">
<div class="image-container">
<img src="https://www.ladymakeup.com/js/lightbox/img/demopage/image-3.jpg" style="width: 100%;
<!-- this is the part not displaying -->
box-shadow: inset -1px -1px #fff, 
inset 1px 1px grey, 
inset 0px 0px #dfdfdf, 
inset 1px 2px #0a0a0a;" alt="image">
</div>
</div>
</div>

Answer 1

在html CSS中提供阴影效果时，需要使用"从上到下，从右到左，模糊颜色"；。指定模糊值以查看阴影颜色的扩散。