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

sample image of the error is shown here

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

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

1 个答案: