CSS：创建一个内嵌的圆形框阴影

Question

我正在尝试创建一个如图所示的框阴影：

如您所见，阴影是圆形的。我用这样的 CSS 尝试过：

 .rottweiler {
      width: 600px;
      height: 300px;
      background-image: url('https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12224942/Rottweiler-On-White-10.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top;
      border: 1px solid silver;
      box-shadow: inset 0 0 30px 30px rgba(0,0,0,0.9);
    }

<div class="rottweiler"></div>


   

我想让阴影更像一个圆圈，我该怎么做？

Answer 1

您可以使用radial-gradient.

.rottweiler {
    width: 600px;
    height: 300px;
    background-image: radial-gradient(circle, transparent, transparent, rgba(0, 0, 0, 0.8)), url('https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12224942/Rottweiler-On-White-10.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    border: 1px solid silver;
}

<div class="rottweiler"></div>