CSS3总结

前缀

chrome: -webkit-

safari: -webkit-

friefox:-moz-

opera:-0-

书写的时候应该先用有前缀的样式，再用无前缀的样式

圆角

border-radius:20px 20px 20px 20px 左上，右上，右下，左下

阴影

box-shadow:2px 2px 3px #aaaaaa;

语法

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值

v-shadow 必需。垂直阴影的位置。允许负值

blur 可选。模糊距离

spread 可选。阴影的尺寸

color 可选。阴影的颜色

inset 可选。将外部阴影 (outset) 改为内部阴影。

文本阴影

text-shadow:1px 1px #000; 水平垂直颜色

text-shadow:1px 1px .3em #000; 水平垂直模糊直径颜色

径向渐变

1.语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：默认为to bottom，即从上向下的渐变；
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

2.示例：to left、top right、to bottom、to top

div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */
div { background:linear-gradient(to top, red , blue) }

分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变，效果如下图：

3.示例：to right bottom、top right top、top left bottom、top left top

div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }

分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变，效果如下图：

注意：top right bottom和top bottom right是等同的

4.使用角度

div { background: linear-gradient(10deg, red, blue) }

效果如下图：

5.多个渐变点

5.1 多个渐变点默认均匀分布

div { background: linear-gradient(to right, red, blue, green) }

理论上渐变点数目不受限制，实际效果如下图：

5.2 多个渐变点不均匀分布

div { background: linear-gradient(red 5%, green 15%, blue 60%) }

6.重复性渐变

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

10%的位置为yellow，20%的位置为green，然后按照这20%向下重复，效果如下图：

7.使用rgba

div { background:linear-gradient(to right, rgba(255, 0 ,0, 1), rgba(255, 0 ,0 , 0)) }

从红色的不透明，到全透明的渐变，效果图如下：

【参考文章：CSS3 渐变（Gradients）、CSS3 Gradient_gradient, css3属性详解】

径向渐变

语法

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。其语法如下：

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

例1：多颜色点均匀分布

div { background: radial-gradient(red, green, blue); }
以中心（50% 50%）为起点，到最远角（farthest-corner），从red到green、blue的均匀渐变，效果如下图：

完整的代码可以写成：

div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); }
或
div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

例2：多颜色节点不均匀分布

div { background: radial-gradient(red 5%, green 15%, blue 60%); }

例3：设置渐变形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }

circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异。

例4：不同尺寸的渐变

size指定了渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

效果图如下，分别用“红色”描出了不同属性指定的渐变终点：

例5：重复性渐变

repeating-radial-gradient() 函数用于重复径向渐变

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

效果图如下：

【参考文章：CSS3 渐变（Gradients）、CSS3 Gradient_gradient, css3属性详解】

选择器

:nth-child和:nth-of-type都是CSS3中的伪类选择器

:nth-of-type 限制条件少

p:nth-child(2) 其渲染的结果就是父标签的第二个子元素。

p:nth-child(2) 表示这个元素要是p标签，且是第二个子元素，是两个必须满足的条件。

<section>
   <div>我是一个普通的div标签</div>
   <span>我是一个普通的span标签</span>
   <p>我是第1个p标签</p>
   <p>我是第2个p标签</p> 
</section>

那么p:nth-child(2)将不会选择任何元素。

p:nth-of-type(2) 表示父标签下的第二个p元素

无论在div标签后面再插入个多少个标签，都是第二个p标签中的文字变红。

<section>
   <div>我是一个普通的div标签</div>
   <span>我是一个普通的span标签</span>
   <p>我是第1个p标签</p>
   <p>我是第2个p标签</p> 
</section>

:nth-child 基本用法

:frist-child 选中第一个圆度

:last-child 选中的最后一个元素

:only-child 选中的元素是其父元素的唯一子元素

:nth-last-child(2) 其父元素的第二个子元素的每个 p 元素，从最后一个子元素开始计数：

:nth-child(8)

选中第8个子元素

正方向范围

:nth-child(n+6)

选中从第6个开始的子元素

使用 :nth-child(n+6) ，就相当于让你选中第6个 :nth-child(6) 和其后的所有子元素

负方向范围

:nth-child(-n+9)

选中从第1个到第9个子元素

使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素

前后限制范围

:nth-child(n+4):nth-child(-n+8)

选中第4-8个子元素

使用 nth-child(n+4):nth-child(-n+8) 选中某一范围内子元素，从第4个到第8个子元素

:nth-child(3n+1):nth-child(even) 间隔选择子元素

使用 :nth-child(3n+1) 我们可以每隔3个选中一个，也就是第 1, 4, 7 和 10 个子元素，但通过使用 :nth-child(even) 过滤掉了奇数位子元素，也就是 1 和 7，于是，剩下的子元素只有 4 和 10。

:nth-of-type 的用法

:nth-of-type(3)

可以指定相同的子元素类型，然后再选择。

正方向相同子元素类型范围

span:nth-of-type(n+3)

div:nth-of-type(2n+2)

使用 span:nth-of-type(n+3) 或 div:nth-of-type(2n+2) ，首先指定是相同的子元素类型，然后在这些类型里选择...

负方向相同子元素类型范围

span:nth-of-type(-n+4)

div:nth-of-type(-n+5)

使用 span:nth-of-type(-n+4) or div:nth-of-type(-n+5) ，首先指定是相同的子元素类型，然后在这些类型里选择...

前后范围限制相同子元素类型

span:nth-of-type(n+3):nth-of-type(-n+6)

div:nth-of-type(n+1):nth-of-type(-n+3)

使用 :nth-of-type(n+3):nth-of-type(-n+6) 和 div:nth-of-type(n+1):nth-of-type(-n+3) ，首先指定是相同的子元素类型，然后在这些类型里选择...这个例子中选中的将会是第 1-3 和 3-6 个子元素。

高级相同子类型加前后范围限制用法

span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6)

div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3)

使用 span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6) 和 div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3),你既能够限制是在相同类型子元素里选择，同时指定选择的起始位置和结束位置。这里同时使用了奇偶位限制。

浏览器支持

所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。

【参考文章】

子代选择器和父代选择器

然后我们在<style>标签里增加一个子代选择器

.mainDiv > div{

background-color: green;

}

让子代的背景色都为绿色

修改后保存用浏览器打开如图，可见【儿子】那个div已经变为绿色

然后我们去掉子代选择器，添加一个后代选择器

.mainDiv div{

background-color: red;

}

让后代的背景色都为红色

修改后保存用浏览器打开如图，可见【儿子】和【孙子】的div已经变为红色

现在我们再看看把上面的子代和后代样式都同时应用，效果如图。

经过上面的结果展示，我们能得到结论。

子代选择器：只对应用对象的直接相应子节点有效。如实例代码中的儿子div。

后代选择器：对应用对象内的所有相应子节点都有效。如实例中的儿子div和孙子div。