这次任务左下角有一个进度条，之前没有接触过progress这个元素，查了一下才知道具体用法。 对于webkit内核浏览器：
::-webkit-progress-bar{ ... } //设置进度条未完成部分的样式 ::-webkit-progress-value{ ... } //设置进度条已完成部分的样式 progress{ -webkit-appearance:none } //若单独设置了样式要将-webkit-appearance设置为none对于firefox浏览器
progress{ ... } //设置进度条未完成部分的样式 ::-moz-progress-bar{ ... } //设置进度条已完成部分的样式另外，我开始写的时候看::-webkit-progress-value和::-moz-progress-bar既然都是给已完成部分的进度条设置样式，就把它们写在了一起，结果发现这样会不起作用，必须要把两个样式分开写才可以（即使内容一样）：
::-webkit-progress-value, ::-moz-progress-bar{ ... } //这样设置的样式没有效果 ::-webkit-progress-value{ ... } ::-moz-progress-bar{ ... } //两个样式需要分开书写页面右上角的头像，和其它部分的头像不同的是它的右下角有一个绿白相间的小圆圈图案(做任务的时候把它换成了胡歌的头像hhhh)。 一开始就是直接想的用两个div，里面一个div背景色是白色，边框是绿色，外面再套一个白色div，把边缘都圆角化就可以画出图案。 后来想有没有更简便的方法，于是发现了outline属性，和border类似，但是outline-radius只有在firefox浏览器中才可以用，在Chrome浏览器outline是不能圆角化的，于是放弃。 再后来发现可用通过设置阴影达到最外层的白色效果，这样只用给一个伪元素设置样式就可以实现：
background-color: #fff; //最里层白色 border: 3px solid #38a76a; border-radius: 50%; //绿色边框 box-shadow: 0 0 0 3px #fff; //外层白色阴影