一、今天完成的事情

今天在修改任务八第一页的bug时候，发现轮播图下面的hover效果是横线，变成圆形怎么办？

我们可以使用border-radius，但是发现在使用50%时，和100%时，都会得到一个圆形，那这两个值有什么区别呢：

border-radius的值是百分比的话，就相当于盒子的宽度和高度的百分比。

如一个50px和一个150px的方形，如果border-radius设置为100%，则等价于：

1、border-radius：50px/150px

而border-radius又是由border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius组成，所有上面border-radius：100%又等价于：

1.border-radius-top：100%

2.border-radius-right：100%

3.border-radius-bottom：100%

4.border-radius-left：100%

或者

1.border-radius-top：50px 150px;

2.border-radius-right：50px 150px;

3.border-radius-bottom：50px 150px;

4.border-radius-left：50px 150px;

为什么border-radius设置成100%和50%都能画成圆呢，那是因为，在W3C中对重合曲线做了规定：如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。
也就是说，如果相邻圆角的半径都设置成大于50%，那么浏览器会根据图形的实际情况做一些计算。
因此，为了避免不必要的计算，建议使用border-radius: 50%

什么是伪元素？什么是伪类？他们有什么区别？怎么使用他们？

1、区别

（1）伪元素主要是用来创建一些不存在原有dom结树种的元素，例如::berore和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在dom中，不可复制，仅仅是zaInCSS

渲染层加入。css3建议使用::表示伪元素。例如div::before。

::bofore和::after这两个伪类下有特有的属性content，必须有这个属性。

1、attr()调用当前元素的属性，可以方便的比如将图片的alt提示文字或链接的href地址显示出来，如下：

a:after{

content:"("attr(href)")";

}

2、url()/uri()用于引入媒体文件

h1;before{

content:url(log.png);

}

3、counter() 调用计数器，可以不使用列表元素实现序号功能。
　　h2:before{
　　　　counter-increment: chapter;
　　　　content: "Chapter" counter(chapter) ". "
　　}

(2)伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法直接表示这种状态，就可以通过伪类来为其添加样式。例如a元素的：hover，:active等。css3中建议使用：表示伪元素，如：a:hover

1.原始的HTML片段

<ul>

      <li>First li element</li>

      <li>Second li element</li>

</ul>

2.伪类

1）给第二个li元素添加样式，可以再第二个li元素上加个class

<ul>

      <li>First li element</li>

      <li class="second">Second li element</li>

</ul>

  .second{color：#f00}

2）也可以通过伪类给第二个li元素添加样式

可以看出来，第二个li元素是dom结构里本来就存在的。

二、遇到的问题

暂时没有

三、明天要做的事情

开始任务十

四、收获

明白了什么是伪元素，什么是伪类，伪元素与伪类有什么区别，分别是怎么使用的。当实现某一个效果时，我们需要用到什么伪元素或者是伪类。