1、新建一个html代码页面,然后创建一个div标签,同是给这个div添加一个class类(案例中类名为test)

2、设置test类显示为一个小圆css样式代码:.test{ width: 50px; height: 50px; border-radius:100%; border:1px solid #ccc; background-color: #fff; margin:50px auto; position: relative; }

3、保存html代码后使用浏览器打开,即可看到浏览器页面上显示一个小圆

4、回到html代码页面,使用:before为test类添加一个大圆圈

5、保存html代码后刷新浏览器,在浏览器上即可看到小圆圈外显示一个大圆圈

6、回到html代码页面,使用hover设置鼠标滑过后大圆圈的背景为红色

7、保存html代码后使用刷新浏览器即,把鼠标放到小圆圈上即可看到大圆背景色变为红色。
