（推荐教程：css教程）
html代码：
<div class="card"> <img src="/static/img/03_pingtai/03_02.jpg" alt=""/> <div> <span>打破企业间壁垒，提供便捷的接入方式，实现不企业，不同品牌、不同类型间的家电的数据互联互通和数据协同</span> </div></div>
css代码：
.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实现卡片式图片效果的详细内容。