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

html5 • • 问答

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

如您所见，阴影是圆形的。我用这样的 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></div>

回答

您可以使用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></div>

以上是CSS：创建一个内嵌的圆形框阴影的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容