版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
- 盒子模型的稳定性：width>padding>margin（外边距合并）
圆角边框（CSS3）
- border-radius:50%;
- 有兼容性问题
- border-radius:1px 1px 1px 1px;/还是顺时针方向，分别控制四个角/
- border-radius:50% 0;/代表左上角和右下角都是圆形，而另外两个不变/
- border:1px solid red;边框属性
课堂实例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>2019年9月9日—盒子圆角</title>
<style>
div
{
width: 300px;
height: 300px;
background-color: pink;
margin:100px auto;
/*表示上下100像素，左右居中*/
border-radius: 150px;
/*
0是直角，是原来的正方形的一半的时候的时候变成标准圆
用border-radius:50%;也可以实现
*/
border:1px solid red;
}
</style>
</head>
<body>
<div>
</body>
</html>作业1：柠檬精（瞎鼓捣的）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>作业——柠檬精</title>
<style>
div
{
width: 200px;
height: 200px;
background-color: yellow;
border-radius: 120px 0;
border:1px solid darkgoldenrod;
text-align: center;
line-height: 200px;
/*text-shadow: 0 0 0 grey;*/
}
div:hover
{
background-color: lightseagreen;
}
</style>
</head>
<body>
<div>
蓝精灵爱吃柠檬
</div>
</body>
</html>实现的效果是这样的：
作业2：QQ表情包“大黄脸”
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>作业之—QQ表清包"大黄脸"</title>
<style>
.nav
{
width: 200px;
height: 200px;
background-color: yellow;
border-radius: 50%;
border:1px solid red;
overflow: hidden;
}
.son1
{
float: left;
margin-top:40px;
padding: 4px;
width: 80px;
height: 50px;
border-radius:100%;
background-color: white;
padding-right: 1px;
}
.son2
{
margin-top:40px;
padding: 4px;
float: right;
width: 80px;
height: 50px;
border-radius:100%;
background-color: white;
padding-left: 1px;
}
.grandson1 , .grandson2
{
background-color: black;
float: center;
margin-top:18px;
width: 20px;
height: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="nav">
<div class="son1">
<div class="grandson1">
</div>
</div>
<div class="son2">
<div class="grandson2">
</div>
</div>
</div>
</body>
</html>截图效果如下：
睡觉去了，忙了一中午，饭还没吃！