# 1.边框圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 5px solid black;
border-radius: 50px 20px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
总结：边框圆角 :border-radius: 大小
# 2.圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
border-radius: 150px;
}
</style>
</head>
<body>
<div> </div>
<img src="images/1.png" width="300px" height="300px">
</body>
</html>
# 3.父级边框塌陷问题
解决方案:
1.增加父级元素的高度
#father{
border:1px solid red;
height:800px;
}
2.增加一个空的div标签,清除浮动
<div class="clear"> </div>
.clear{
clear:both;
}
3.overfolw
在父级元素中增加一个 overfolw :hidden;
4.父类增加一个伪类: after
#father:after{
content:'';
display: block;
clear: both;
}
总结：
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类：after(推荐)
写法稍微复杂一点，但是没有副作用，推荐使用
扫一扫
3544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
