css - 使用 CSS 制作 3D 画框效果
问题描述
我正在尝试使用 CSS 在图像上的绘画上复制画布框架效果。我可以做阴影和圆角,但我不知道如何做“圆角/环绕边”的 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>
推荐阅读
- java - 将 *.SO 库包含到 Java 项目 (Linux)
- swift - 4 个单元格中仅添加了 1 个子视图
- javascript - Ajax下载大数据pdf文件
- php - 在数据库中添加值的 PHP 查询失败
- excel - 如何在 excel 中找到一个单元格并将值打印到 python 3.6
- sql - 使用 ISNULL 插入时 SQL 服务器抛出错误
- python - Django Rest Framework的HTTP循环内的异步HTTP调用
- javascript - Javascript 如何控制事件
- javascript - 如何更改视频js中bigPlayButton的功能?
- javascript - 生成没有 DB 的 Prisma 模式,只有第 3 方 REST API