本文摘自PHP中文网,作者V,侵删。
首先我们来看一下效果图:
(推荐教程:CSS教程)
html代码:
1 2 3 4 5 6 | < div class = "card" >
< img src = "/static/img/03_pingtai/03_02.jpg" alt = "" />
< div >
< span >打破企业间壁垒,提供便捷的接入方式,实现不企业,不同品牌、不同类型间的家电的数据互联互通和数据协同</ span >
</ div >
</ div >
|
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .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实现卡片式图片效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css3pie是什么?
css animation-play-state属性怎么用
css 括号是什么
css如何实现始终将footer固定在底部
jq如何改变css样式宽度
基于html5 canvas的字符串,路径,背景,图片的分析
css中实现背景透明的三种方式
怎么在html页面写css样式表
css 内阴影怎么做
如何实现图片抖动效果
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css实现卡片式图片效果