CSS img图片

目录

　　图标库

　　图片样式

图标库

Font Awesome 图标

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">　

图片样式

圆角图片

img {
   border-radius: 5px;
}

椭圆图片

img {
   border-radius: 50%;
}

缩略图

img {
   border: 1px solid #ddd;
   border-radus: 5px;
   padding: 5px;
}

图片添加连接

a {
	display: inline-block;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 5px;
}

<a href="test.png" target="_blank"><img src="test.png" alt=""></a>

卡片式图片

<div class="polaroid">
	<img src="test.png" alt="">
	<div class="container">
		<p>image</p>
	</div>
</div>

div.polaroid {
	width: 80%;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-bottom: 25px;
}
div.container {
	text-align: center;
	padding: 10px 20px;
}