CSS3选择器、边框、阴影

一、CSS3常用选择器

• 1、子元素选择器
  （1）E > F E元素内的每个子元素F（选取父元素是 E 元素的每个 F 元素）
• 2、兄弟选择器
  （1）E + F E元素后面的第一个兄弟元素F
  （2）E ~ F 所有在E元素之后的兄弟元素F
• 3、属性选择器
  （1）E[att] 有属性att的所有E元素
  （2）E[att=’val’] 属性att的值是val的元素
  （3）E[att^=’val’] 属性att的值以val开头的元素
  （4）E[att$=’val’] 属性att的值以val结尾的元素
  （5）E[att*=’val’] 属性att的值包含val字符串的元素
• 4、UI元素状态伪类选择器
  （1）E:enabled 匹配表单中可用的元素
  （2）E:disabled 匹配表单中禁用的元素
  （3）E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
• 5、伪元素选择器
  （1）E::first-line 选择每个块级元素的首行
  （2）E::first-letter 选择每个块级元素的首字母
  （3）E::selection 用来改变浏览网页选中文本的默认效果、基本上只有 background 、color 有效果
• 6、结构性伪类
  （1）E:first-child 选择第一个子元素E（选择所有属于其父元素的首个子元素）
  （2）E:last-child 选择最后一个子元素E（选择所有属于其父元素的最后一个子元素）
  （3）E:nth-child(n) 选择一个或多个特定的子元素 （第一个编号为1）
  （4）E:nth-last-child(n) 选择一个或多个特定的子元素，从最后一个子元素开始算
  （5）E:nth-of-type(n) 选择指定的元素，仅匹配使用同种标签的元素
  （6）E:nth-last-of-type(n) 选择指定的元素，从元素的最后一个开始计算，仅匹配使用同种标签的元素
  （7）E:first-of-type 匹配父元素下使用同种标签的第一个子元素
  （8）E:last-of-type 匹配父元素下使用同种标签的最后一个子元素
  （9）E:only-child 匹配父元素下仅有的一个子元素
  （10）E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素
  （11）E:empty 匹配一个不包含任何子元素的元素 ( 文本节点也被看作子元素 )
  （12）E:not(s) 匹配不符合当前选择器的任何元素( 反选 )
• 7、表格插色常用方法
  
  li:nth-child(even){background:red;}
  li:nth-child(odd){background:green;}
  

二、CSS3边框

• 1、圆角边框效果 border-radius
  （1）语法 ： 水平方向 / 垂直方向
  border-radius：[ length | % ]{1,4} / [ length | % ]{1,4}
  border-top-left-radius:5px ;
  border-top-right-radius:15px;
  border-bottom-right-radius:20px;
  border-bottom-left-radius:25px;
  border-radius:5px 15px 20px 25px ;
  border-radius:20px / 10px ; ?
  浏览器支持情况：IE9.0以前版本不支持
  （2）示例：

  <style type="text/css">        ul li{list-style:none;float:left;width:100px;height:100px;text-align:center;background:#ccc;margin-top:30px;margin-left:30px;}        ul li:nth-child(1){border-radius:20px;}        ul li:nth-child(2){border-radius:50px;}        ul li:nth-child(3){border-radius:50px 0 50px 0;}        ul li:nth-child(4){border-radius:50px 0 50px 50px;}        ul li:nth-child(5){border-radius:0 0 0 50px;}        ul li:nth-child(6){width:200px;border-radius:100px/50px ;}        ul li:nth-child(7){width:0px;height:0px;border:100px solid #ccc;border-radius:50%;background:transparent;border-right-color:transparent;border-left-color:transparent;}    </style>

• 2、多色彩边框效果
  （1）语法：border-colors：
  相关属性：
  border-top-colors
  border-right-colors
  border-bottom-colors
  border-left-colors
  浏览器支持情况：火狐（FF）2.0以上版本支持

（2）示例：

    <style type="text/css">            #box{width:100px;height:100px;border:5px solid;margin:100px auto;                -moz-border-top-colors:#ccc #f70 #666 #0f0 #f70;                -moz-border-left-colors:#ccc #f70 #666 #0f0 #f70;                -moz-border-right-colors:#ccc #f70 #666 #0f0 #f70;                -moz-border-bottom-colors:#ccc #f70 #666 #0f0 #f70;            }        </style>    

• 3、图像边框###
  （1）语法：
  border-image：border-image-source || border-image-slice [ / border-image-width? [ / border-image-outset ]? ]? || border-image-repeat
  border-image-source : 图片边框的路径
  border-image-slice : 图片边框向内偏移
  border-image-width：图片边框的宽度
  border-image-repeat : 指定边框背景图的填充方式

（2）填充方式
border-image-repeat : stretch | repeat | round
默认值：stretch
stretch： 指定用拉伸方式来填充边框背景图
repeat： 指定用平铺方式来填充边框背景图，当图片碰到边界时，如果超过则被截断
round： 指定用平铺方式来填充边框背景图，图片会根据边框的尺寸，动态调整图片的大小直至正好可以铺满整个边框
图像边框浏览器支持程度：IE10及以下均不支持

（3）切割
border-image-slice: 30% 20% 40% 10% ;
这个参数有两个特点：第一，没有单位，专指像素。第二，支持百分比值。可以设置四个值进行图片的切割，其顺序和之前讲过的margin和刚讲的圆角设置的顺序是一样的，均为上右下左，顺时针方向。

（4）制作步骤
1、第一步 调用边框图片：border-image: url(‘图像边框.png’);
2、第二步 裁剪图片：border-image: url(‘图像边框.png’) 33% ;

三、CSS3 阴影

• 1、文本阴影
  （1）语法
  text-shadow：none | length{2,3} color 默认值：none
  （2）取值
  none： 无阴影
  第1个长度值：阴影水平偏移值。可为负值。
  第2个长度值：阴影垂直偏移值。可为负值。
  第3个长度值：可选，阴影模糊值。不允许负值。
  color： 设置阴影的颜色。
  （3）说明可以设定多组效果，每组参数值以逗号分隔。

• 2、盒阴影
  （1）属性：box-shadow。和文本阴影相比，盒阴影多一个属性值——阴影外延值（第四个值）
  （2）语法
  box-shadow：none | length{2,4} color 默认值：none
  （3）取值
  none： 无阴影
  第1个长度值：阴影水平偏移值。可为负值。
  第2个长度值：阴影垂直偏移值。可为负值。
  第3个长度值：可选，阴影模糊值。不允许负值。
  第4个长度值：可选，阴影外延值。不允许负值 。
  color： 设置阴影的颜色。