CSS3（12）图片

圆角图片

代码：

<img src="xxx.jpg" style="border-radius:8px;">

效果：

 小技巧：

椭圆形图片：border-radius:50%;

缩略图

我们使用 border 属性来创建缩略图。

代码：

<img src="xxx.jpg" style="width:100px;border:1px solid #ddd;border-radius:4px;padding:5px;">

效果：

 

响应式图片

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

实例中，你可以通过重置浏览器大小查看效果:

代码：

<img src="xxx.jpg" style="max-width:100%;height:auto;">

效果：

 卡片式图片

代码：

<div style="width: 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="width: 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="width: 50%; float: left; max-width: 235px;" src="xxx.jpg" alt="" />
<img style="width: 50%; float: left; max-width: 235px; filter: blur(2px);" src="xxx.jpg" alt="" />

效果：

 

其他效果：https://www.runoob.com/cssref/css3-pr-filter.html