Maison > Article > interface Web > CSS pour obtenir un effet d'image de style carte
Regardons d'abord le rendu :
(Tutoriel recommandé : Tutoriel CSS)
Code html :
<div class="card"> <img src="/static/img/03_pingtai/03_02.jpg" alt=""/> <div> <span>打破企业间壁垒,提供便捷的接入方式,实现不企业,不同品牌、不同类型间的家电的数据互联互通和数据协同</span> </div> </div>
Code 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; }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!