CSS图片实例

1. 前言

上一篇我们详细讲解了如何利用CSS，来制作一个好看的按钮。

本篇我们来研究下如何用CSS美化图片。

2. 普通图片

普通情况下，我们给图片设置个宽度和高度即可。

普通图片：<br><imgsrc="1.jpg"class="img"><br>

对应CSS：

.img{width:400px;height:300px;}

此时效果如下，比较生硬，难言美观：

3. 圆角图片

我们可以通过为图片添加圆角，让图片变得不那么生硬，虽然是一个小的改变，但是效果不错：

圆角图片：<br><imgsrc="1.jpg"class="img img-round"><br>

对应CSS：

.img-round{border-radius:16px;}

效果如下：

4. 缩略图效果

还可以借助边框、内边距，实现一种好看且常用的缩略图效果，如下：

缩略图：<br><imgsrc="1.jpg"class="img img-thumbnail"><br>

对应CSS：

.img-thumbnail{border:1px solid grey;border-radius:16px;padding:4px;}

此时效果如下，很明显缩略图的方式，看起来还是比较大气的。

5.小结

本节简单的讲解了如何使用CSS美化图片效果，虽然简单，但比较实用。