本文摘自PHP中文网，作者V，侵删。
首先我们来看一下效果图：
（推荐教程：CSS教程）
html代码：
1 2 3 4 5 6 | <div class="card">
<img src="/static/img/03_pingtai/03_02.jpg" alt=""/>
<div>
<span>打破企业间壁垒，提供便捷的接入方式，实现不企业，不同品牌、不同类型间的家电的数据互联互通和数据协同</span>
</div>
</div>
|
css代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .card img {
width: 100%;
}
.card{
height: 270px;
width: 260px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 4px;
display: inline-block;
margin-left: 18px;
vertical-align: top;
}
.card span {
font-size: 12px;
color: #BFBFBF;
display: block;
letter-spacing: 2px;
padding: 30px 20px;
}
|
以上就是css实现卡片式图片效果的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
css怎么设置文字透明效果
css为什么加了top移动不了
css滚动条颜色怎么设置
css怎么给删除线设置颜色
css表格怎么设置中间对齐
css中的animation是什么
react中图片用什么标签
了解一些 提高前端开发效率的 css 属性选择器
css 预处理器
css怎么将字和图对齐
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css实现卡片式图片效果
