ホームページ > 記事 > ウェブフロントエンド > カードスタイルの画像効果を実現するCSS
まず、レンダリングを見てみましょう:
(推奨チュートリアル: 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 中国語 Web サイトの他の関連記事を参照してください。