- 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; }
点击 "运行实例" 按钮查看在线实例
效果图:
推荐手册