利用 CSS3 的新特性，使图片的应用场景有了更多的可能。
卡片式图片
利用 box-shadow 做出立体的卡片效果：
div.card {
width: 200px;
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);
}
.card img {
width: 100%;
}
响应式图片
响应式图片会自动适配各种尺寸的屏幕。
img {
max-width: 100%;
height: auto;
}
响应式图库
当窗口大于 700px 时，一行显示四张图片；窗口大于 500px 且小于 700px 时，一行显示两张图片；小于 500px 时，一行一张图片。 用媒体查询和百分比宽度实现，注意这里切换到 IE 盒模型（border-box）：
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
滤镜 filter
filter，将模糊或颜色偏移等图形效果应用于元素。
CSS 标准里包含了一些已实现预定义效果的函数：
| 属性值 | 描述 |
|---|---|
none | 默认值，没有效果。 |
blur ( px ) | 给图像设置高斯模糊，值越大越模糊；接受长度值，不接受百分比。 |
brightness（%） | 亮度调节，是图片看起来更亮/暗。 0%，图像会全黑； 100%，则图像无变化； 值超过 100%，图片更亮。 |
contrast（%） | 对比度调整。 原图为 100%； 值越大，对比度越小。 |
drop-shadow(h-shadow v-shadow blur spread color) | 设置阴影效果。 设置方式和 box-shadow 很相似（除了 inset 关键字不允许），不同之处在于，使用 filter 时一些浏览器为了更好的性能会提供硬件加速。 |
grayscale（%） | 灰度设置。 原图灰度为 0%，值越大，灰度越大。 |
hue-rotate（deg） | 色相旋转。 值为 0deg 或 360deg 的倍数，则图像无变化。 |
invert（%） | 反转输入图像。 0%，图像无变化；100%，则是完全反转。 |
opacity（%） | 透明度调节。 0%，是完全透明，100%，则图像无变化。 |
saturate（%） | 饱和度调节。 100%，图像无变化。 值越大，饱和度越高。 |
sepia（%） | 将图像转换为深褐色。 0%，图像无变化。 值越大，深褐色效果越明显。 |
url() | 接受一个 XML 文件，该文件设置了 一个 SVG 滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。filter: url(svg-url#element-id) |
图片预览（Modal 弹窗）
点击图片缩略图时，出现展示原图的弹窗，达到预览效果。
点击图片时，显示弹窗（默认隐藏，display:none）。预览窗中的 image-source 由被点击的缩略图提供（this.src）。
// 获取模态窗口
var modal = document.getElementById("myModal");
// 获取图片模态框，alt 属性作为图片弹出中文本描述
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
};
