gpt4 book ai didi

css - 使用CSS绘制3D画框效果

转载 作者:太空宇宙 更新时间:2023-11-03 20:05:00 25 4
gpt4 key购买 nike

我正在尝试使用 CSS 在图像上的绘画上复制 Canvas 框架效果。我可以做阴影和圆 Angular ,但我不知道如何做“圆 Angular/环绕边”的 3D 效果。

我的实际是左图,而我试图复制右图的效果。请忽略预期图像的背景。

有什么帮助吗?谢谢。

.image{
display:flex;
justify-content:space-evenly;
}
#actual {
border-radius: 4px;
box-shadow: 20px 4px 10px rgba(0,0,0,0.35), 40px 8px 10px rgba(0,0,0,0.15);
}
<div class="image">
<img id="actual" src="http://lorempixel.com/output/cats-q-c-640-480-10.jpg">
<img id="expected" src="https://i.imgur.com/XD8Vdvv.jpg">
</div>

最佳答案

您可以使用 inset 阴影对其进行近似:

.image{
display:inline-block;
border-radius: 4px;
box-shadow:
-2px -2px 1px rgba(0,0,0,0.5) inset,
20px 4px 10px rgba(0,0,0,0.35),
40px 8px 10px rgba(0,0,0,0.15);
width:320px;
height:240px;

margin:10px;
background:url(http://lorempixel.com/output/cats-q-c-640-480-10.jpg) center/cover;
}
<div class="image">
</div>

关于css - 使用CSS绘制3D画框效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54334710/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com