css 边框半径 box-shadow inset 显示背景图像的细边缘答案

【问题标题】：css border radius box-shadow inset shows a thin edge of the background imagecss 边框半径 box-shadow inset 显示背景图像的细边缘
【发布时间】：2021-05-19 05:08:37
【问题描述】：

我正在围绕具有半径的图像构建白色边框。悬停在白色边框上显示嵌入阴影。它有效，只有您可以在半径角看到图像的薄边缘，在盒子阴影的旁边。我尝试了一个边框，但细边一直显示在边框和盒子阴影之间。如何预防？

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);

sample image of the error is shown here

【问题讨论】：

标签： css background-image border

【解决方案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%)

【讨论】：

您好，Shahil，感谢您的回复。不幸的是，这不起作用。
嗨，马丁，请检查这个 codepen 链接codepen.io/sam-123/pen/JjbJYgP
您好 Shahil，我在您的示例中看到暗阴影现在靠近边框（在内部）。阴影应覆盖边框。这就是为什么我还使用 box-shadow 属性解决了白色边框。这很好用。我需要帮助的是，在我的示例图片 (i.stack.imgur.com/ekU7H.jpg) 中，您可以看到在白色边框外侧的角落中，背景中可以看到一小部分图像。我想摆脱它。你知道解决方案吗？
嗨马丁我试图复制你的问题，我发现在应用带有嵌入框阴影的边框半径属性后出现的角上的细边我试图找出解决方案但没有有什么，我不知道为什么会这样，所以我尝试了上面的代码。
嗨，Shahil，这是一个奇怪的错误。我希望有人能告诉我如何解决这个错误。