CSS基本用法(二)

CSS3

CSS3是对CSS2的扩充，删减，优化

结构伪类

选择器功能E:first-child匹配第一个孩子E:last-child匹配最后一个孩子E:nth-child(n)匹配第n个孩子E:nth-child(2n)或E:nth-child(even)匹配偶数的孩子E:nth-child(2n+1)或E:nth-child(odd)匹配奇数的孩子E:only-child匹配有且仅有一个孩子

border-collapse

用来合并表格的边线，其值为:collapse,例如border-collapse:collapse;

伪元素

选择器功能:first-letter操作当前元素中第一个字:first-line操作当前元素中第一个行文字:before在之前插入，在一个盒子内部的最前面:after在之后插入，在一个盒子内部的最后面

文本阴影

text-shadow:水平阴影、垂直阴影、模糊举例、阴影颜色

向文本添加一个或者多个阴影，为逗号分隔的阴影列表，每个阴影由2个到3个长度值和1个可选的颜色值组成，省略的长度为0。

值描述h-shadow必需。水平阴影的位置。允许负值v-shadow必须。垂直阴影的位置。允许负值blur可选。模糊的距离color可选。阴影的颜色

描述：

• text-shadow 文字阴影可以有多组值，多组之间用逗号隔开就可以
• h-shadow 水平阴影正值阴影在右边 负值在左边
• v-shadow垂直阴影正值在下边，负值在上边
• blur 模糊强度，值越大越模糊

盒子阴影

box-shadow:水平方向阴影、垂直方向阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影

水平阴影和垂直阴影必需，其他可以省略语法：box-shadow:h-shadow v-shadow blur spread color inset注释：向框添加一个或者多个阴影，为逗号分隔的列表，每个阴影由2-4个长度值、可选的颜色以及可选的inset关键词来规定。省略的长度值为0。

值描述h-shadow必需。水平阴影的位置。允许负值v-shadow必需。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影尺寸color可选。阴影颜色inset可选。将外部阴影改为内部阴影

• box-shadow 盒子阴影可以有多组值，以逗号隔开
• h-shadow 水平阴影正值在右边，负值在左边
• v-shadow 垂直阴影正值在下边，负值在上边
• blur 模糊尺寸，值越大越模糊

圆角矩形

border-radius 值的顺序为： 左上 右上 右下 左下；值一样时写为一个值。单位px；

CSS透明度

有颜色的标签可以设置透明度：格式为rgba(红色，绿色，蓝色，透明度)a:透明度，值为0到1，0表示完全透明，1表示完全不透明。- 背景颜色透明 background-color:rgba(255,255,255,0.3)