JavaWeb学习之路(50)–CSS应用实例之图片

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>

  .img-round {

           border-radius: 16px;

效果如下：

4. 缩略图效果

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

 缩略图：<br>

   <img src="1.jpg" class="img img-thumbnail"><br>

      .img-thumbnail {

          border: 1px solid grey;

          border-radius: 16px;

          padding: 4px;

      }

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

5.小结

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