本文目录1. 前言2. 普通图片3. 圆角图片4. 缩略图效果5.小结1. 前言上一篇我们详细讲解了如何利用CSS来制作一个好看的按钮。本篇我们来研究下如何用CSS美化图片。2. 普通图片普通情况下我们给图片设置个宽度和高度即可。普通图片brimgsrc1.jpgclassimgbr对应CSS.img{width:400px;height:300px;}此时效果如下比较生硬难言美观3. 圆角图片我们可以通过为图片添加圆角让图片变得不那么生硬虽然是一个小的改变但是效果不错圆角图片brimgsrc1.jpgclassimg img-roundbr对应CSS.img-round{border-radius:16px;}效果如下4. 缩略图效果还可以借助边框、内边距实现一种好看且常用的缩略图效果如下缩略图brimgsrc1.jpgclassimg img-thumbnailbr对应CSS.img-thumbnail{border:1px solid grey;border-radius:16px;padding:4px;}此时效果如下很明显缩略图的方式看起来还是比较大气的。5.小结本节简单的讲解了如何使用CSS美化图片效果虽然简单但比较实用。
