需要效果：将原本是长方形、正方形的图片，变成一个圆形图片

这样的好处：不需要对图片进行特别的处理，直接使用

 

实现思路：

①制作一个方形div盒子，将图片放在div盒子里

②将盒子设置成圆形（利用 border-radius 属性）

③设置盒子的 overflow 属性值为 hidden

 

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>制作圆形图片-王迪</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border-radius: 50%;/*制作圆形的原理：将正方形的盒子，设置 border-radius属性值为50%*/
				overflow:hidden;/*设置超出部分，隐藏*/
			}
			div img{
				width: 100%;/*设置图片宽度为100%，即宽度是父级元素的100%*/
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/6.jpg" />
		</div>
	</body>

更多推荐

【HTML5】Web前端——网页实用技巧1：将一个方形图片,变成圆形（利用CSS属性）