首先我们来看一下效果图:
(推荐教程: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实现卡片式图片效果的详细内容。更多信息请关注PHP中文网其他相关文章!