
- 0133技术站
- 联系QQ:18840023
- QQ交流群
- 微信公众号
CSS 3图片
本节将介绍的是如何使用 CSS 来布局图片
圆角图片
效果图:

缩略图:
使用 border 属性来创建缩略图
效果图:

响应式图片
响应式图片会自动适配各种尺寸的屏幕
效果图:

图片滤镜
CSS filter 属性用为元素添加可视效果
.demo{
-webkit-filter: grayscale(60%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}点击 "运行实例" 按钮查看在线实例
效果图:

卡片式图片
div.box {
width:500px;
background-color: #cfd9cd;
box-shadow: 0 10px 8px 0 rgba(202, 34, 34, 0.2), 0 6px 20px 0 rgba(127, 7, 7,0.19);
margin-bottom: 25px;
}
img{
margin-left: 22px;
margin-top:18px;
}
div.content {
text-align: center;
padding: 10px 20px;
}点击 "运行实例" 按钮查看在线实例
效果图:

推荐手册