1、阴影模糊半径和阴影扩展半径的区别

    阴影模糊半径：可选，只能为正值。

    阴影扩展半径：可选。值为正，整个阴影都扩大；值为负，则缩小。

2、X轴偏移量和Y轴偏移量如果设置为负数，向反方向发散阴影。

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

1、inset必须写在参数的第一个或最后一个。

2、添加多个阴影时，只需要用逗号隔开。如：     

.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

b本章节笔记

d本章节的代码

b背景的大小

裁剪方式背景

本节重点的

参考案例截图

本章节重点

渐变背景的笔记

CSS3 结构性伪类选择器—last-child

“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，

ul>li:last-child{background:blue;}

示例演示

在博客的排版中，每个段落都有15px的margin-bottom，假设不想让博客“post”中最后一个段落不需要底部的margin值，可以使用“:last-child”选择器。

HTML代码：

<div class="post">   <p>第一段落</p>   <p>第二段落</p>   <p>第三段落</p>   <p>第四段落</p>   <p>第五段落</p> </div>

CSS代码：

.post {   padding: 10px;   border: 1px solid #ccc;   width: 200px;   margin: 20px auto; } .post p {   margin:0 0 15px 0; } .post p:last-child {   margin-bottom:0;
 }
 演示结果：

• transition-property:指定过渡或动态模拟的CSS属性

• transition-duration:指定完成过渡所需的时间

• transition-timing-function:指定过渡函数

• transition-delay:指定开始出现

• 的延迟时间

CSS3 结构性伪类选择器—first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

示例演示

通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。

HTML代码：

<ol>   <li><a href="##">Link1</a></li>   <li><a href="##">Link2</a></li>   <li><a href="##">link3</a></li> </ol>

CSS代码：

ol > li{   font-size:20px;   font-weight: bold;   margin-bottom: 10px; } ol a {   font-size: 16px;   font-weight: normal; } ol > li:first-child{   color: red;
 }
 演示结果：

CSS3 结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。

示例展示

点击链接显示隐藏的段落。

HTML代码：

<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand">     content for Brand </div>

CSS代码：

.menuSection{   display: none; } :target{/*这里的:target就是指id="brand"的div对象*/   display:block; }

演示结果：

分析：

1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand

2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。

多个url（多个target）处理：

就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。
如下面例子：
html代码：  

<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand">   content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake">  content for jake </div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron">     content for aron </div>

css代码：

#brand:target {   background: orange;   color: #fff; } #jake:target {   background: blue;   color: #fff; } #aron:target {   background: red;   color: #fff; }

CSS3 结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

示例显示：

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码：

<p>我是一个段落</p>
<p> </p>
<p></p>

CSS代码：

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}
演示结果：