本文摘自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字体样式属性有哪些
css %单位的特点
jsp加载css失败的原因
css如何使用计数器给元素自动编号？css计数器的使用（代码示例）
css最大的优点是什么
display:inline是什么意思？
16 个css开发中需要了解的devtools技巧
h5调用相机拍照并压缩图片
css如何使页面整体居中
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css实现卡片式图片效果
