网页上，有的地方鼠标放上去，鼠标的形状会改变，这是因为设置了光标在元素上显示的样式。
光标类型
cursor 用来设置鼠标光标在元素上时，显示的样式，常见的有以下四种：
- default ：默认值，通常是 箭头
- pointer ：小手型，通常用来提醒用户，可以 点击
- text ：工字型，提示用户可以选择文字
- move ：十字光标，提示用户可以移动
<style>
div {
width: 240px;
height: 200px;
background-color: rgb(51, 242, 30);
}
p {
cursor: pointer;
}
</style>
<body>
<div>
<p>鼠标光标类型</p>
</div>
</body>
边框圆角
边框圆角可以让盒子四个角变得圆滑，增加页面细节，提升用户体验
边框圆角的属性名是 border-radius ，属性的取值可以是 数字 ，也可以是 百分比
赋值规则：可以参照下图
从盒子的 左上角 开始赋值，然后 顺时针 ，依次赋值，如果没有赋值的，看对角，与边距赋值类似。
如果只有一个值，表示盒子四个角的圆角相同：
<style>
div {
width: 100px;
height: 100px;
background-color: rgb(51, 242, 30);
border-radius: 10px;
}
</style>
<body>
<div></div>
</body>
盒子圆角四个值不同：
<style>
div {
width: 100px;
height: 100px;
background-color: rgb(51, 242, 30);
border-radius: 10px 20px 30px 16px;
}
</style>
三个值示例：与边距取值方式相同
<style>
div {
width: 100px;
height: 100px;
background-color: rgb(51, 242, 30);
border-radius: 10px 50px 30px;
}
</style>
圆、胶囊按钮、椭圆
（1）实现一个正圆
实现正圆，盒子必须是 正方形 ，然后设置边框圆角为盒子宽高的 一半 :
<style>
div {
width: 100px;
height: 100px;
background-color: rgb(51, 242, 30);
border-radius: 50%;
}
</style>
（2）实现胶囊按钮
胶囊按钮盒子要求是 长方形 ，设置边框圆角的值是盒子高度的一半：
<style>
div {
width: 180px;
height: 100px;
background-color: rgb(51, 242, 30);
border-radius: 50px;
}
</style>
（3）椭圆
<style>
div {
width: 180px;
height: 100px;
background-color: rgb(51, 242, 30);
border-radius: 50%;
}
</style>
