圆角图片
代码：
<img src="xxx.jpg" style="border-radius:8px;">
效果：
小技巧：
椭圆形图片：border-radius:50%;
缩略图
我们使用 border 属性来创建缩略图。
代码：
<img src="xxx.jpg" style="100px;border:1px solid #ddd;border-radius:4px;padding:5px;">
效果：
响应式图片
响应式图片会自动适配各种尺寸的屏幕。
实例中，你可以通过重置浏览器大小查看效果:
代码：
<img src="xxx.jpg" style="max-100%;height:auto;">
效果：
卡片式图片
代码：
<div style=" 300px; margin: 20px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.2);">
<img style=" 100%;" src="xxx.jpg" />
<div style="text-align: center; padding: 10px;">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
效果：
The Troll's tongue in Hardanger, Norway
图片滤镜
CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。
代码：
<img style=" 50%; float: left; max- 235px;" src="xxx.jpg" alt="" />
<img style=" 50%; float: left; max- 235px; filter: blur(2px);" src="xxx.jpg" alt="" />
效果：
