点此查看 所有教程、项目、源码导航

本文目录

• 1. 前言
• 2. 普通图片
• 3. 圆角图片
• 4. 缩略图效果
• 5.小结

1. 前言

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

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

2. 普通图片

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

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

对应CSS：

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

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

3. 圆角图片

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

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

对应CSS：

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

效果如下：

4. 缩略图效果

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

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

对应CSS：

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

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

5.小结

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