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>
效果:
![](https://www.runoob.com/try/demo_source/rock600x400.jpg)
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