利用CSS可以把图片定义成各种样式。

使用图片滤镜

在CSS中可通过filter属性来实现图片滤镜的功能，该属性的浏览器兼容性如下所示。

属性
filter	53.0 18.0 -webkit-	13.0	35.0	9.1 6.0 -webkit-	40.0 15.0 -webkit-

案例

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

运行一下

翻转图片

翻转一张图片，水平翻转或者垂直翻转。这很简单，只是一种小技巧，如下所示。

img:hover {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

运行一下

圆角图片

利用CSS的border-radius就可以创建圆角的图片了。

案例1：圆角半径为8px

img {
    border-radius: 8px;
}

运行一下

案例2：圆角半径为50%

img {
    border-radius: 50%;
}

运行一下

设置装X的缩略图

缩略图其实没啥花样，下例中通过设置边界和内边距从而实现相对装X的缩略图。不难，看看就好啦~

<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}
</style>

<img src="https://logo.zhuanfou.com/draw_by_jerkz.jpg">

运行一下

给上面的那个装X的缩略图上加超链接

<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>

<a href="https://zhuanfou.com/">
    <img src="https://logo.zhuanfou.com/draw_by_jerkz.jpg">
</a>

运行一下

图片自适应

一般来说图片自适应的CSS设置，主要是宽度采用百分百，高度取值auto，其实一般来说高度默认就是auto，所以有时不用特意声明定义高度为auto。

img {
    max-width: 100%;
    height: auto;
}

运行一下