CSS边框半径框阴影插入显示背景图像的细边缘

Question

我在一个半径的图像周围建立一个白色边框。悬停在白色边框上显示一个插入阴影。它的工作原理，只有你可以看到一个薄边缘的图像在半径角，其次是框阴影。我尝试了一个边框，但是在边框和框阴影之间的薄边缘一直显示出来。如何预防呢?

background-image: url(http://new.urbinaconsulting.com/wp-content/uploads/2021/02/ocx-promo-block.svg);
background-color: #F5F3F0;
border-radius: 40px 40px 40px 40px;
overflow: hidden;
border-width: 0px;
border-style: solid;
border-color: #F5F3F0;
padding-top: 48px;
padding-right: 48px;
padding-bottom: 48px;
padding-left: 48px;
transition: border 300ms ease 0ms,background-color 300ms ease 0ms,background-image 300ms ease 0ms;
-moz-box-shadow: 7px 7px 15px rgba(0,0,0,1),inset 0 0 0 10px rgb(245,243,240);
-webkit-box-shadow: 7px 7px 15px rgba(0,0,0,1),inset 0 0 0 10px rgb(245,243,240);
box-shadow: -7px -7px 10px rgba(255,255,255,.98),7px 7px 15px rgba(0,0,0,0.3),0 0 0 10px rgba(245,243,240,.98),inset 0 0 0 10px rgba(245,243,240,.98);

错误的示例图像显示在这里

Answer 1

嗨，你能试试这段代码吗

background-image: url(http://new.urbinaconsulting.com/wp-content/uploads/2021/02/ocx-promo-block.svg);
background-color: #F5F3F0;
border-radius: 40px 40px 40px 40px;
overflow: hidden;
border-width: 10px;
border-style: solid;
border-color: #F5F3F0;
padding-top: 48px;
padding-right: 48px;
padding-bottom: 48px;
padding-left: 48px;
-webkit-box-shadow: -7px -7px 10px rgb(255 255 255 / 98%), 7px 7px 15px rgb(0 0 0 / 30%), 0 0 0 10px rgb(245 243 240 / 98%);
box-shadow: -7px -7px 10px rgb(255 255 255 / 98%), 7px 7px 15px rgb(0 0 0 / 30%), 0 0 0 10px rgb(245 243 240 / 98%);

如果你想在边框内添加另一个深色图层你可以添加inset box-shadow

box-shadow: -7px -7px 10px rgb(255 255 255 / 98%), 7px 7px 15px rgb(0 0 0 / 30%), 0 0 0 10px rgb(245 243 240 / 98%), inset 0 0 13px 5px rgb(0 0 0 / 98%)