目录
1.选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
1.1 属性选择器
属性选择器：属性是相对于标签而言，所谓属性选择器就是根据指定名称的属性的值来查找元素。
- E[attr]：拥有attr属性的E标签。eg.li[style]：查找拥有style属性的li标签
- E[attr=value]：拥有attr属性并且属性值为value的E标签（=是严格匹配）。eg.li[class=red]：查找拥有class属性并且值为red的li标签
- E[attr*=value]：拥有attr属性并且属性值中包含(可以在任意位置)value的E标签。eg.li[class*=red]：查找拥有class属性并且属性值包含red的li标签
- E[attr^=value]：拥有attr属性并且属性值以value开头的E标签。
- E[attr$=value]：拥有attr属性并且属性值以value结束的E标签。
- E[attr|=value]：有attr属性并且属性值以value开头的E标签，该值必须是整个单词。
1.2 兄弟选择器
- element1+element2：element1 之后紧跟其后的element2元素。两种元素必须拥有相同的父元素。eg. .first + li：添加了.first样式的标签的相邻的li元素
- element1~element2：element1 之后出现的所有element2。两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。eg. .first ~ li：添加了.first样式的元素之后的所有兄弟li元素
1.3 伪类选择器
1.E:first-child：查找E元素的父元素的第一个子元素E，不会限制查找的元素的类型。
2.E:last-child：查找E元素的父元素中最后一个子元素E，不会限制查找的元素的类型。
3.E:first-of-type：查找E元素的父元素的第一个子元素E，限制查找的元素的类型，过滤掉其它类型的元素。
4.E:last-of-type：查找E元素的父元素的第一个子元素E，限制查找的元素的类型。
5.E:nth-child(n)：第n个子元素E，不限制查找类型。
6.E:nth-last-child(n)：倒数第n个子元素E，不限制查找类型。
7.E:nth-child(even)：所有偶数，不限制查找类型。
8.E:nth-child(odd)：所有奇数，不限制查找类型。
9.E:nth-of-type(n)：第n个子元素E，限制类型。
10.E:nth-last-of-type(n)：倒数第n个子元素E，限制类型。
11.E:nth-of-type(even)：所有偶数，限制类型。
12.E:nth-of-type(odd)：所有奇数，限制类型。
注意：n:默认取值范围为0~子元素的长度，但是当n<=0时，选取无效。
n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-of-type(-n+5)等
eg.为前、后5个li元素添加样式
分析
n=0,-n+5=5;
n=1,-n+5=4;
n=2,-n+5=3;
n=3,-n+5=2;
n=4,-n+5=1;
n=5,-n+5=0;（无效）
所以前、后五个元素应用了样式
13.E:empty：没有任何的内容，连空格都没有的E元素。
14.E:target：可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式
1.4 伪元素选择器
1.E::before：定义在一个元素的内容之前插入content属性定义的内容与样式
2.E::after：定义在一个元素的内容之后插入content属性定义的内容与样式
注意：
- 默认是行级元素，如果想设置宽高，就必须转换为块级元素（三种转换方式：display:block或float:** 或position:**）
- 必须添加content属性，哪怕不设置内容，也需要content:""，否则后期不可见
- E:after、E:before 在旧版本浏览器（IE6/7/8）里是伪类，在新版本浏览器里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。（建议规范书写::）
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 200px;
}
div:nth-of-type(1){
width: 300px;
height: 200px;
background-color: red;
float: left;
}
div:nth-of-type(2){
width: 100px;
height: 200px;
background-color: blue;
float: left;
position: relative;
}
div:nth-of-type(2)::before{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
left: -10px;
top: -10px;
}
div:nth-of-type(2)::after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
left: -10px;
bottom: -10px;
}
</style>
<body>
<div></div>
<div></div>
</body>
3.E::first-letter：文本的第一个字母或字（应用：首字下沉）
4.E::first-line：文本第一行
5.E::selection：可改变选中文本的样式
2.颜色设置
- 预设值：background-color: red;
- 十六进制：background-color: #c9ffa6;
- rgb(R,G,B)：background-color: rgb(255,150,0);
- hsl(H,S,L)：background-color: hsl(300,100%,50%);
HTML5中添加了一些新的颜色的表示方式
1.RGBA(R,G,B,A);
RGBA在RGB的基础上多了控制alpha透明度的参数
RGBA比元素设置CSS的透明度（opacity:0-1，只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；transparent 不可调节透明度，始终完全透明）更好，它可以不影响整个元素的透明度，也不会影响到元素其他的属性。
语法:
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间（0：透明；1：不透明）
正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
红绿==>黄，绿蓝==>青，红蓝==>紫，红绿蓝==>白
eg.background-color: rgba(255,0,255,0.2);
2. HSLA(H,S,L,A)：
此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度
语法：
H：Hue(色调,色相)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360，过渡为：(红橙黄绿青蓝紫红)
S：Saturation(饱和度)。指色彩的纯度，越高色彩越纯，低则逐渐变灰，取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%，50%是平衡值，一般建议保留50%
A：Alpha(透明度)。取值0~1之间（0：透明；1：不透明）
eg.background-color: hsla(300,50%,50%,1);
3.文本阴影：text-shadow
这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时，能给文字增加质感。
语法：（可以多个阴影叠加）
text-shadow:[Color X Offset Y Offset Blur],[Color X Offset Y Offset Blur]...
或者
text-shadow:[X Offset Y Offset Blur Color],[X Offset Y Offset Blur Color]...
说明：
- Color：阴影颜色
- X Offset：阴影的水平偏移距离。正值：阴影向右偏移；负值：阴影向左偏移
- Y Offset：阴影的垂直偏移距离。正值：阴影向下偏移；负值：阴影向上偏移
- Blur：阴影的模糊值。不可以是负值，值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0
4.盒模型：box-sizing
1.在默认情况下，CSS设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度和高度（在页面呈现出来的）：
- padding + border + width = 盒子的宽度
- padding + border + height = 盒子的高度
很明显，这不直观，很容易出错，造成网页中其它元素的错位。
2. CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
- content-box：设置的width属性值仅仅是内容的宽度，盒子的最终的宽高值在width的基础上再加上padding和border的宽度（对象的实际宽度=设置的width值+border+padding）
- border-box：设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容（对象的实际宽度=设置的width值），如果添加了padding和border，那么真正放置内容的区域会减小，但是它可以稳固页面的结构
3.浏览器的兼容性：IE8及以上版本支持该属性，Firefox 需要加上：-moz-，低版本的IOS和Android浏览器需要加上：-webkit-
5.边框圆角：border-radius
border-radius可以通过值来定义样式相同的角，也可以对每个角分别定义
- border-radius：*px——四个角的圆角值都一样
- border-radius：*px *px *px *px——左上； 右上；右下；左下
- border-radius：*px *px—— 左上、右下；右上、左下
- border-radius：*px *px *px——左上；右上、左下；右下
单个圆角的设置：除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等；如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
另一种方法设置圆角：border-radius:水平x方向/垂直y方向
以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）
1.制作椭圆（四个方向上都是一致的对称圆角）
border-top-right-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;
border-bottom-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
等价：
2.非对称圆角
6.案例：Android机器人
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Android机器人</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #ccc;
}
.content{
width: 500px;
height: 500px;
border: 1px solid red;
margin:50px auto;
}
.an_header{
width: 250px;
height: 125px;
background-color: darkgreen;
margin: 10px auto;
/*添加圆角*/
border-radius: 125px 125px 0 0;
position: relative;
}
/*使用伪元素添加眼睛*/
.an_header:before,
.an_header:after{
/*1.一定设置content属性*/
content: "";
/*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素 float display position*/
position: absolute;
bottom: 40px;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fff;
}
.an_header:before{
left: 70px;
}
.an_header:after{
right: 70px;
}
.an_body{
width: 250px;
height: 250px;
background-color: darkgreen;
border-radius: 0 0 20px 20px;
margin:0 auto;
position: relative;
}
/*手臂*/
.an_body:before,
.an_body:after{
content: "";
position: absolute;
top: 20px;
background-color: darkgreen;
width: 30px;
height: 180px;
border-radius: 10px;
}
.an_body:before{
left:-40px;
}
.an_body:after{
right:-40px;
}
.an_footer{
width: 250px;
height: 100px;
position: relative;
margin:0 auto;
/* background: #fff;*/
}
/*脚*/
.an_footer:before,
.an_footer:after{
content: "";
position: absolute;
top: 0;
background-color: darkgreen;
width: 30px;
height: 90px;
border-radius: 0 0 10px 10px;
}
.an_footer:before{
left: 50px;
}
.an_footer:after{
right: 50px;
}
</style>
</head>
<body>
<div class="content">
<div class="an_header"></div>
<div class="an_body"></div>
<div class="an_footer"></div>
</div>
</body>
</html>
7.边框阴影：box-shadow
box-shadow 属性向边框添加一个或多个阴影（添加多个时用逗号隔开）
语法：box-shadow:h v blur spread color inset;
说明：
- h：必需，允许负值；水平方向的偏移值
- v：必需，允许负值；垂直方向的偏移值
- blur：可选，默认0；模糊距离
- spread：可选 默认0；阴影的尺寸，扩展和收缩阴影的大小，值越大，阴影的扩散面积越大
- color：可选，默认黑色；颜色
- inset：可选,默认是外阴影；将外部阴影 (outset) 改为内部阴影
width: 200px; height: 200px display: block background-color: hsla(360,100%,50%,0 color:
4832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
