首先我們來看一下效果圖：

創(chuàng)新互聯(lián)長期為上千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為濰坊企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站設計，濰坊網(wǎng)站改版等技術服務。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

（推薦教程：CSS教程）

html代碼：

<div class="card">
    <img  src="/static/img/03_pingtai/03_02.jpg" alt=""/>
    <div>
        <span>打破企業(yè)間壁壘，提供便捷的接入方式，實現(xiàn)不企業(yè)，不同品牌、不同類型間的家電的數(shù)據(jù)互聯(lián)互通和數(shù)據(jù)協(xié)同</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實現(xiàn)卡片式圖片效果
文章轉載：http://jinyejixie.com/article34/cjdese.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、搜索引擎優(yōu)化、ChatGPT、網(wǎng)站設計、App開發(fā)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)