首先我們來看看效果圖:
(推薦教學: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中文網其他相關文章!