| 前缀 | 浏览器 |
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
1. 圆角效果 border-radius
实心左半圆：
2.阴影 border-shadow（自己理解：可以把阴影看成和容器一样大的块，然后移动）
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
注意：inset可以写在参数的第一个或最后一个，其它位置是无效的。
阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
X轴偏移量和Y轴偏移量值可以设置为负数
3.border-image
repeat的意思就是重复，目前因为是刚好被整除，效果看不出来。如果改下DIV的宽高，再来看重复的效果：
边角部分为裁掉了，可见repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。
Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）；
Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。
注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。
Firefox 26.0下是可以准确区分的。
4. 颜色之RGBA
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 color：rgba(R,G,B,A)
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
背景设为半透明的白色： background:rgba(255,255,255,0.5);
5.渐变色彩（线性渐变(linear)）
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+和 Opera12.1+等浏览器的支持。
第一个参数（默认为“180deg”，等同于“to bottom”）
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
给背景添加从右下角到左上角的渐变背景：
background-image:linear-gradient(totop left,red, orange, yellow,green);
6. text-overflow 与 word-wrap
text-overflow: 用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
7.white-space 属性设置如何处理元素内的空白。
| 值 | 描述 |
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
8.嵌入字体@font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。
p{
font-family:”myfont”;
}
9.background-origin
设置元素背景图片的原始起始位置。
background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
10.background-clip
用来将背景图片做适当的裁剪以适应实际需要。
background-clip ： border-box | padding-box | content-box| no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
11.background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
12.多重背景multiple backgrounds
13.属性选择器（在CSS2和基础上增加了3个属性选择器）
使得属性选择器有了通配符的概念
14.征服CSS3选择器（上）
（1）root（在HTML文档中，根元素始终是<html>）
:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。
:root {
background:orange;
}
“:root”选择器等同于<html>元素，简单点说：
:root{background:orange}
html{background:orange;}
（2）not
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素
表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：
form {
width: 200px;
margin: 20pxauto;
}
div {
margin-bottom:20px;
}
input:not([type="submit"]){
border:1px solid red;
}
（3）empty
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。
p{
background:orange;
min-height: 30px;
}
p:empty {
display: none;
}
（4）target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。点击链接显示隐藏的段落。
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content forBrand
</div>
.menuSection{
display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
display:block;
}
分析：
1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand
2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。
多个target
#brand:target {
background:orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
#aron:target {
background: red;
color: #fff;
}
（5）first-child
选择元素中的第一个子元素，记住是子元素，而不是后代元素。
（6）last-child
选择元素中的最后一个子元素，记住是子元素，而不是后代元素。
（7）nth-child(n)
“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
（8）nth-last-child(n)
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
（9）first-of-type
“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
示例演示：
通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。
<div class="wrapper">
<div>我是一个块元素，我是.wrapper的第一个子元素</div>
<p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
<p>我是一个段落元素</p>
<div>我是一个块元素</div>
</div>
CSS代码：
.wrapper {
width: 500px;
margin: 20pxauto;
padding: 10px;
border: 1px solid#ccc;
color: #fff;
}
.wrapper > div {
background:green;
}
.wrapper > p {
background: blue;
}
/*我要改变第一个段落的背景为橙色*/
.wrapper > p:first-of-type {
background: orange;
}
(10) nth-of-type(n)
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
.wrapper > div:nth-of-type(2n+1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div:nth-child(4n+1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
Odd表示奇数，even表示偶数
（11）last-of-type
“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
将容器“div.wrapper”中最后一个Div元素背景设置为橙色。
.wrapper > div:last-of-type{
background: orange;
}
（12）nth-last-of-type(n)
（13）only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
HTML代码：
<div class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="post">
<p>我是一个段落</p>
</div>
CSS代码：
.post p {
background:green;
color: #fff;
padding: 10px;
}
.post p:only-child {
background:orange;
}
（14）only-of-type
“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
将仅有一个P元素的背景修改为橙色。
.wrapper p:only-of-type{
background: orange;
}
15．征服CSS3选择器（下）
（1）:enabled选择器
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
（2）:disabled选择器
（3）:checked选择器
设置按钮选中时的样式
扫一扫
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
