overflower属性
.c1{
width: 200px;
height: 200px;
border: 1px solid red;
overflow: auto
visible:默认值，不会裁剪，会呈现在元素框之外
hidden:会隐藏，多余内容不可见
scroll:内容回呗修剪，会以滚动条看到多余内容
auto：滚动条看到
圆形图形设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header_img{
height: 200px;
width: 200px;
border: 1px solid red;
border-radius: 50%;
overflow: hidden;
}
.header_img>img{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="header_img">
<img src="1.jpg" >
</div>
</body>
</html>
总结一点：width宽度设置的时候，直接可以写100px
30%这种百分比写法，它的宽度按照父级标签的宽度
的百分比来计算
原文：https://www.cnblogs.com/jtyzy/p/15202080.html