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美化图片效果,虽然简单,但比较实用。