1、圆角边框
定义圆角边框后，可以将盒子定义为圆角的
（1）长度方式
<html>
<head>
<meta charset="utf-8">
<title>盒子模型外边距</title>
<style>
div{
200px;
height: 100px;
background-color: yellowgreen;
border-radius:3px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
设置成高度的一半：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
200px;
height: 100px;
background-color: yellowgreen;
border-radius:50px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（2）百分比方式
圆形：长度为正方形的一半：
<html>
<head>
<meta charset="utf-8">
<title>盒子模型外边距</title>
<style>
div{
200px;
height: 200px;
background-color: yellowgreen;
border-radius:50%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
百分比方式定义盒子：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
200px;
height: 100px;
background-color: yellowgreen;
border-radius:5%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（3）不同的角设置不同的圆角
以左上角为起点，顺时针的方式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
200px;
height: 200px;
background-color: yellowgreen;
border-radius:10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（4）选择角去设置：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
200px;
height: 200px;
background-color: yellowgreen;
border-bottom-right-radius: 16px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2、盒子阴影
（1）前两个为必选项，后四个可写可不写
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
200px;
height: 200px;
background-color: yellowgreen;
border-radius: 16px;
box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（2） 只写前两个属性：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
200px;
height: 200px;
background-color: yellowgreen;
border-radius: 16px;
box-shadow:10px 10px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3、文字阴影
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
200px;
height: 200px;
text-shadow: 5px 5px 6px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div>
人之初，性本善
</div>
</body>
</html>
