CSS3

选择器

属性选择器：

div : 标签选择器 id : ID选择器 class : 类选择器 div .p : 交集选择器 div p : 后代选择器 div>p : 子代选择器 div+p : 相邻选择器(div标签相邻的p标签) div~p : (div标签后面的所有p标签) E:[attr] E:[attr=value] E:[attr^=value] E:[attr$=value] E:[attr*=value] E:[attr~=value] //不论类名有多少个，^代表必须以该value值开头，因此一个类包含多个类名，类名也必须以该value值开头，否则不等。

结构选择器

E:first-child //代表E元素父节点下第一个子元素，并且该子元素与E一致，否则无效 E:last-child E:nth-child() E:nth-child(n) //n代表0,1,2,3....(当n小于1时无效) E:nth-last-child(1) //从后向前选择，表示倒数第一个元素

伪类选择器

E:target //表示激活的状态，要配合锚点使用 E:empty //表示元素为空的状态

伪元素：通过css模拟出html的效果

E::after E::before //代表在E元素内的最后一个位置插入虚构的元素

伪元素选择器

E::first-letter E::first-line E::selector

色调模式

在CSS2中可以改变元素的透明度，但仍存在缺陷，改变外部元素的透明度，由于透明度继承性，会导致内部元素的透明度也发生改变，并且不能再更改内部元素的透明度。

<div id="parent"> <div id="son"></div> </div> #parent{ width:200px; height:200px; background-color:red; opacity:0.3; } #son{ width:100px; height:100px; background-color:blue; }

CSS3新增了两种颜色模式：

RGBA : Red Green Blue (0-255) Alpha(0-1) HSLA : 色调(0-360) 饱和度(0-100%) 亮度(0-100%) 透明度(0-1)

文字阴影

text-shadow : 水平位移 垂直位移 模糊程度 阴影颜色 注：若在同一个元素上想使用多个阴影效果，可以并列写，用逗号隔开

<p class="tu">你好，世界</p> <p class="ao">你好，世界</p> body{ background-color:#ccc; } p{ color:#ccc; text-align:center; font-size:80px; font-weight:bold; margin-top:20px; } .tu{ text-shadow:-1px -1px 0 #fff,1px 1px 0 #000; } .ao{ text-shadow:-1px -1px 0 #000,1px 1px 0 #fff; }

盒子模型

三个盒子：content-box、padding-box、border-box 盒模型：box-sizing : content-box(外加模式) / border-box(内减模式)

私有化前缀

CSS3浏览器支持程度差，有时需要添加私有前缀

<div id="box"></div> //实现渐变效果 #box{ width : 200px; height : 200px; margin : 0 auto; border : 1px solid black; //实现从左到右 红色到蓝色的渐变效果 background : linear-gradient(left,red,blue); //添加私有前缀 background : -webkit-linear-gradient(left,red,blue); background : -moz-linear-gradient(left,red,blue); background : -ms-linear-gradient(left,red,blue); background : -o-linear-gradient(left,red,blue); }

浏览器内核私有前缀： Google、Safari : -webkit- Firefox : -moz- IE : -ms- Opera : -o-

实现真正的3D效果

透视perspective仅仅是视觉上呈现3D效果，并不是真正的3D

<div id="in"> <div id="out"></div> </div> #in{ width: 500px; height: 500px; margin: 100px auto; perspective: 113px; background-color: red; transform: rotateY(75deg); } #out{ width: 200px; height: 200px; margin: 100px auto; background-color: pink; transform: rotateY(45deg); }

想要真正的实现3D效果，使用transform-style:preserve-3d

<div id="in"> <div id="out"></div> </div> #in{ width: 500px; height: 500px; margin: 100px auto; background-color: pink; position: relative; transform: rotateY(85deg); transform-style: preserve-3d; } #out{ width: 300px; height: 300px; background-color: red; position: absolute; top: 100px; left: 100px; transform: rotateX(45deg); }

用transition 或 animation 实现进度条

<div id="content"> <span class="expand"></span> </div> <a href="javascript:void(0)" class="triggerFull">Start Animation</a> html{ height: 100%; } body{ margin: 0; padding: 0; height: 100%; background-color: #161616; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; } a{ text-decoration: none; display: block; } .triggerFull{ width: 140px; font-size: 0.8em; border-top: 1px solid #111; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #111; background: -webkit-linear-gradient(top, #161616 0%, #000000 100%); padding: 10px; text-transform: lowercase; color: #fff; margin: 100px auto; text-align: center; border-radius: 3px; } #content{ width: 100%; height: 5px; margin: 100px auto; background-color: #000; position: relative; } /** 第一种方法：使用transition **/ .expand{ display: block; width: 0%; height: 1px; position: absolute; top: 0; margin: 2px 0; background-color: #2187e7; box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7); transition: all 10s linear; } //点击a添加class:fullwidth .fullwidth .expand{ width: 100%; } /** 第二种方法：使用动画 **/ .fullwidth .expand{ display: block; width: 100%; height: 1px; position: absolute; top: 0; margin: 2px 0; background-color: #2187e7; box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7); -webkit-animation: move 10s linear; } @keyframes move{ 0%{ width: 0%; } 100%{ width: 100%; } } //绑定事件兼容性 function addEvent(element,type,fn){ if(element.addEventListener){ element.addEventListener(type, fn); }else{ element.attachEvent('on'+type, fn); } } //判断Class是否存在 function hasClass(element,className){ return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')); } //增加Class类名 function addClass(element,className){ if(!hasClass(element,className)){ element.className += " " + className; } } window.onload = function(){ var btn = document.querySelector('.triggerFull'); var div = document.getElementById('content'); addEvent(btn,'click',function(){ addClass(div,"fullwidth"); }); };

=========================补充=============================

一、伪类选择器 :target IE9+

:target属于伪类选择器，就像上面所说的，表示激活的状态，需要配合锚点使用。

此处点击a标签，页面会自动跳转到#parent标签下(a标签自带的功能)，配合:target，实现点击后改变样式，此时url后缀会加上#parent，即使刷新也会存在，只有手动删除才会恢复原来的样式。

<div id="parent"> <span>hello</span> </div> <div id="brand"> <a href="#parent">跳转</a> </div> #parent{ width: 100px; height: 1200px; background: pink; } #parent:target{ background: red; } #parent:target span{ color: green; }

二、状态伪类选择器 IE9+

:checked 常用于form表单内的单选框和复选框:enabled:disabled:focus <form action="#"> 姓名<input type="text" name="username" id="username"> 学号<input type="text" name="number" id="number" disabled="true"> <input type="radio" name="sex" id="male">男 <input type="radio" name="sex" id="female">女 </form> #username:focus{ border: 1px solid red; } #number:disabled{ border: 1px solid blue; } input[name="sex"]:checked{ display: block; } input:enabled{ background: red; }

三、结构伪类选择器 IE9+

:fist-child:last-child:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):first-of-type:last-of-type:only-child:empty

nth-child(n)与nth-of-type(n)区别：

//只是为了演示效果，实际不推荐这么写 <ul> <div>1</div> <div>2</div> <li>3</li> <li>4</li> </ul> ul > div:nth-of-type(2){ color: blue; //有效 } ul > li:nth-chid(2){ color: red; //无效 } ul > li:nth-of-type(2){ color: green; //有效 }

:nth-of-type ： 确定了某个位置上的某类型的子元素 :nth-child ： 只是确定了某个位置上的子元素，并没有确定类型

四、伪元素

::before和::after不是指存在于标记中的内容，而是可以额外插入内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。

在浏览器中当我们选取某段文字，默认是浅蓝色背景+黑色字体。如果想改变这样的样式，可以通过::selection。但是该伪元素在IE中只有IE9支持，并且在Firefox中需要加-moz-前缀(::-moz-selection)、以及该伪元素只支持color和background-color两个属性的设置。

注：在CSS3中伪类用一个冒号:表示，而伪元素用两个冒号表示::

<span>hello world</span> span::selection{ color: #fff; background-color: pink; } span::-moz-selection{ color: #fff; background-color: pink; }

五、border-image

boder-image浏览器支持度强一些，但运用在项目中仅存在一些前端爱好者的blog中。 为了更好的理解，暂时把boder-image在语法的表达形式进行属性的分解阐述（实际应用中是不能分解的，此处只是为了帮助更好理解该属性） 引入背景图片：boder-image-source 切割引入背景图片(切片)：border-image-slice 边框图片的宽度：boder-image-width 边框背景图片的排列方式：boder-image-repeat

此处重点讲的是排列方式：repeat、round、stretch repeat（水平重复）：边框从中间向两边不断平铺，在平铺过程中保持边框背景图片切片的大小，这样就造就了两端边缘可能有被切的现象； round（水平平铺）：对边框背景图的切片进行压缩（或伸缩）来适应边框宽度的大小，进行排列，使其正好显示在区域内； stretch（水平拉伸）：只会把相应的切片进行拉伸，适应边框的大小，默认值；

六、border-radius IE9+

1)border-radius:<-length>{1}设置一个值：top-left/top-right/bottom-right和bottom-left四个值相等。 2)border-radius:<-length>{2}设置两个值：top-left和bottom-right一致、top-right和bottom-left一致。 3)border-radius:<-length>{3}设置三个值：top-left、top-right和bottom-left、bottom-right 4)border-radius:<-length>{4}设置四个值：top-left、top-right、bottom-right、bottom-left分别为不同的值。

boder-radius:<-length>/<-length>：四个角X轴/四个角Y轴 如果X与Y一致，可以省略为一个值。 boder-radius:<-length><-length><-length><-length>/<-length><-length><-length><-length> ： 左上角X轴 右上角X轴 右下角X轴 左下角X轴 / 左上角Y轴 右上角Y轴 右下角Y轴 左下角Y轴

border-radius还是内半径和外半径之分

div{ width: 300px; height: 300px; border: 100px solid #ccc; /*大于100px 边框 和（内容+padding）半径都改变*/ border-radius: 150px; /*小于100px只有 边框 半径改变*/ border-radius: 50px; }

boder-radius的应用：

div{ margin-top: 20px; } #box1{ width: 100px; height: 100px; background: orange; border-radius: 50%; } #box2{ width: 100px; height: 50px; background: pink; border-radius: 50px 50px 0 0; } #box3{ width: 100px; height: 100px; background: blue; border-radius: 100px 0 0 0; } #box4{ width: 100px; height: 50px; background: green; /*border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;*/ border-radius: 50px/25px; }

border-radius:50px/25px：代表四个角X轴为50px，Y轴为25px； border-radius:50px 25px：代表左上角和右下角X、Y轴都为50px，右上角和左下角X、Y轴都为25px；

七、box-shadow IE9+

box-shadow: none | [inset x-offset y-offset blur-radius spread-radius color],[inset x-offset y-offset blur-radius spread-radius color]…

box-shadow属性可以使用一个或多个阴影，用“逗号”隔开

inset：可选，阴影类型，设置为内阴影；默认为外阴影 x-offset：阴影水平偏移量(正右负左) y-offset：阴影竖直偏移量（正上负下） blur-radius：阴影模糊半径 spread-radius：阴影扩展半径，取正值将加深阴影深度，取负值可以向内压缩阴影，直到扩展半径等于模糊半径。

以下代码可以实现实线边框效果，但实质上并非“边框”，因为box-shadow并不是盒模型中的元素，不会计算到内容宽度（即box-shadow不会影响页面的任何布局）

*{ margin: 0; padding: 0; } .box{ width: 200px; height: 100px; margin-left: 30px; float: left; } .border{ border: 10px solid #ccc; } .box-shadow{ box-shadow: 0 0 0 10px red; }

第二段代码：

#box{ width: 200px; height: 200px; background: url(1.jpg); border-radius: 50px; box-shadow: inset 5px 5px 5px 0 black; margin-bottom: 10px; } #img{ width: 200px; height: 200px; border-radius: 50px; box-shadow: inset 10px 10px 5px 0 black; } <div id="box"></div> <img src="1.jpg" id="img">

注： 1. box-shadow的inset如果要运用在图片上，需要设置一个外容器，在将该图片设置为背景图片，接着使用box-shadow。如果直接运用的img标签上则无效。 2. 另外还要注意，如果一个图片大于设置的宽高度，直接用外容器设置背景图片与img标签设置图片，两者显示的区别。前者可能显示图片的一小部分，而img标签将图片进行压缩按照规定的宽度和高度并显示整张图片。 3. IE8以及以下低版本不支持。要想兼容IE低版本，可以使用IE的滤镜来模拟实现。

八、背景的基本属性

背景主要包括五个属性： background-color background-image background-repeat background-attachment(背景图片是固定还是滚动) background-position(背景图片位置)

与背景相关的新增属性： background-origin(指定背景图片的起点) IE9+ background-clip(指定背景图片的显示范围) IE9+ background-size(指定背景图片的尺寸大小) IE9+ background-break(指定内联元素的背景图片进行平铺时的循环方式) 多背景特性

background-origin：虽然现代浏览器都支持，但是在不同内核的浏览器下还是需要浏览器各自的前缀

background-position:top left; //1 background-position:left top; //2 background-position:50% 0; //3 #box{ width: 100px; height: 100px; background: url(1.jpg); margin: 10px; padding: 30px; border: 20px solid rgba(0,0,0,0.1); background-size: 50px 50px; background-repeat: no-repeat; //background-origin: padding-box; //默认 //background-origin: content-box; background-origin: border-box; }

注：以上三个实例都是基于background-attachment:scroll情况下实现的，如果是属性值为fixed将不起任何作用。

background-clip：虽然现代浏览器都支持，但是在不同内核的浏览器下还是需要浏览器各自的前缀

background-clip： border-box(默认) | padding-box | content-box

#box{ width: 100px; height: 100px; background: url(1.jpg); margin: 10px; padding: 30px; border: 20px solid rgba(0,0,0,0.1); background-size: 50px 50px; background-repeat: no-repeat; background-clip: content-box; //超过content-box的其它部分都裁剪 }

扩展：background-repeat属性值的不同，会导致background-image起点不同，只是平时我们用border-color属性覆盖住了它的显示，此时可以将border-color设置为半透明颜色，从而分析情况。

div{ width: 300px; height: 100px; border: 50px dashed rgba(0,0,0,0.5); /*半透明颜色，分析情况*/ background: url(1.jpg) no-repeat; background-color: rgba(255,0,0,0.8); padding: 30px; margin: 20px; } .no-repeat{ background-repeat: no-repeat; /*默认*/ } .repeat{ background-repeat: repeat; }

由图可得：

当background-repeat: no-repeat(默认值)时，background-image是从元素的内边距左上角(padding)到边框右下角(border)结束。

当background-repeat:repeat时，background-image是从元素的边框左上角到边框右下角结束，从而将background-color覆盖。

看到这里，应该了解到background-position、background-origin以及background-clip三者具体的区别

background-size：虽然现代浏览器都支持，但是在不同内核的浏览器下还是需要浏览器各自的前缀

background-size: auto | <-number> | <-percentage> | cover | contain

auto：默认值

number：数值

percentage：相对于元素宽度来说的

cover：背景图片填充整个容器大小，可能会导致图片失真的情况，注意放大后的图片不是正中间，为了让背景图片放大后显示，可以结合background-position:center使用。

background-size:cover配合background-position:center常用来制作”满屏背景”效果。唯一的缺点是，需要制作一张足够大的背景图片，不然在较大的分辨率浏览器下会导致背景图片失真

contain：可以让背景图像保持本身的宽度和高度比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域。但是也可能会导致背景图片失真的情况，并且可能图片不能填充整个容器大小

九、CSS盒模型

定义：在Web网页中，一个元素所占据空间的大小由四个部分组成，分别是内容（Content）、内边距（Padding）、边框（border）、外边距（margin），由此构成了CSS盒模型。

在CSS盒模型中分为两种，一种是W3C的标准盒模型，另外一种是IE的传统盒模型。

W3C标准盒模型：元素的宽度/高度 = 内容宽度/高度 + padding + border

IE传统盒模型：IE5- IE6~7(Quirks模式下) 元素的宽度/高度 = 内容宽度/高度、 内容宽度/高度 = padding + border

box-sizing：指定盒模型计算的方式 IE8+ border-box(默认) | content-box | inherit

注：IE传统盒模型并不是一无是处，当定义好一个元素，并在一定范围内想修改该元素的padding或border时候，元素的总尺寸是不会发生变化的，不需要重新计算元素的盒子大小，不会影响页面的整体布局。

十、渐变 IE10+

本质上说，渐变就是背景属性background-image中一个值，不在是以往的图片制作显示渐变效果，直接通过CSS3属性便可以直接操作，减轻了向服务器端发起的HTTP请求。

线性渐变

//从底部向顶部线性渐变 #top{ background-image: linear-gradient(to top,red,green,blue,pink); /*background-image: linear-gradient(0deg,red,green,blue,pink);*/ } //从右下角向左上角线性渐变 #top-left{ background: linear-gradient(to top left,red,green,blue,pink); /*background: linear-gradient(-45deg,red,green,blue,pink);*/ } //多颜色线性渐变 #many{ background: linear-gradient(to bottom,red 0%,green 20%,blue 38%,pink 52%,black 80%,grey 100%); }

径向渐变

div{ width: 100px; height: 100px; margin: 10px 0 0 100px; border: 1px solid #ccc; font-size: 30px; } /*简单的径向渐变*/ #radial{ background-image: radial-gradient(pink,blue); } /*径向渐变*/ #circle{ background-image: radial-gradient(circle,pink,blue); /*background-image: radial-gradient(circle at 50% 50%,pink,blue);*/ /*background-image: radial-gradient(circle at center,pink,blue);*/ } /*制作一个半径为70、且圆心在中心点的径向渐变*/ #circle-70{ background-image: radial-gradient(2em circle at center,pink,blue); } /*椭圆渐变*/ #ellipse{ background-image: radial-gradient(ellipse,pink,blue); } /*自定义X、Y半径和圆心半径*/ #self{ /*<number>*/ background-image: radial-gradient(50px 30px at 30px 30px,pink,blue); /*<percentage>*/ /*background-image: radial-gradient(50% 30% at 30% 30%,pink,blue);*/ } /*多色径向渐变*/ #many{ background-image: radial-gradient(pink,blue,yellow,green); background-image: radial-gradient(pink 0%,blue 25%,yellow 52%,transparent 100%); }

重复渐变：有时候希望在一个元素的背景上重复的渐变”模式”。在没有重复渐变的属性之前，主要通过重复背景图像（使用background-repeat）创建线性渐变，但没有创建重复的径向渐变的类似方式。因此CSS3推出了repeating-linear-gradient和repeating-radial-gradient。

/*重复线性渐变*/ #repeating-linear{ background-image: repeating-linear-gradient(pink 20px,blue 40px); /*background-image: repeating-linear-gradient(pink 20%,blue 40%);*/ } /*重复径向渐变*/ #repeating-radial{ background-image: repeating-radial-gradient(pink 20px,blue 40px); }

注：对于不兼容渐变效果的浏览器，可以通过图片制作处理渐变效果、IE浏览器通过专门滤镜来处理等

十一、CSS3变形 IE9+

CSS3变形是一些效果的集合，比如平移、旋转、缩放和倾斜效果，每个效果都称为变形函数（Transform Function），它们可以操作元素发生旋转、平移、缩放等变化。这些效果在之前都需要依赖图片、Flash或脚本才能完成，而使用纯CSS来完成这些变形无须加载额外的文件，减少了HTTP请求，加快了页面响应速度。

perspective属性（透视）：简单理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由它的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻； （官方说法：该属性可将可视内容映射到一个视锥上，继而投影到一个2D视平面上。如果不设置透视属性，则Z轴空间中的所有点将平铺到同一个2D视平面内，并且变换结果将不存在景深概念）

<div id="parent"> <div id="son"></div> </div> #parent{ width: 200px; height: 250px; margin: 100px 600px; background-color: pink; perspective: 500px; /*此处对父元素设置，对子元素设置无效*/ } #son{ width: 100%; height: 100%; background-color: blue; transform: rotateX(45deg); transform-origin: bottom; }

backface-visibility属性： 决定元素旋转背面[ rotateY(180deg) ]是否可见。

hidden（默认） | visible

<div class="stage"> <div class="container"> <div class="card front"></div> <div class="card back"></div> </div> </div> ....以下在重复6个相同的div结构 .stage{ float: left; border: 1px dotted orange; position: relative; margin: 20px; border-radius: 8px; perspective: 1000; } .container{ width: 102px; height: 142px; position: relative; transition: 0.5s; transform-style: preserve-3d; } .card{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: hidden; } .front{ background: blue; } .back{ background: pink; transform: rotateY(180deg); } .stage:nth-child(1) .container{ transform: rotateY(0deg); } .stage:nth-child(2) .container{ transform: rotateY(-30deg); } .stage:nth-child(3) .container{ transform: rotateY(-60deg); } .stage:nth-child(4) .container{ transform: rotateY(90deg); } .stage:nth-child(5) .container{ transform: rotateY(-120deg); } .stage:nth-child(6) .container{ transform: rotateY(-150deg); } .stage:nth-child(7) .container{ transform: rotateY(-180deg); }

注意：transform: rotateX(-180deg) translateZ(100px)与transform: translateZ(100px) rotateX(-180deg) 区别

/*先进行旋转再平移*/ transform: rotateX(-180deg) translateZ(100px);

/*先进行平移再旋转*/ transform: translateZ(100px) rotateX(-180deg);

下面在来看一个立方体的例子（疑惑点）

<div class="container"> <div class="cube hidden"> <div class="side front">1</div> <div class="side back">2</div> <div class="side right">3</div> <div class="side left">4</div> <div class="side top">5</div> <div class="side bottom">6</div> </div> </div> .container{ width: 500px; height: 300px; float: left; position: relative; margin: 200px 500px; perspective: 1200px; } .cube{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: rotateY(45deg); } .side{ display: block; position: absolute; width: 196px; height: 196px; border: 2px solid black; line-height: 196px; font-size: 120px; font-weight: bold; color: white; text-align: center; backface-visibility: hidden; /*疑惑点：不知道为什么无效*/ } .cube .front{ background: rgba(255,0,0,0.7); transform: translateZ(100px); } .cube .back{ background: rgba(0,255,0,0.7); transform: rotateX(-180deg) translateZ(100px); } .cube .right{ background: rgba(0,0,255,0.7); transform: rotateY(90deg) translateZ(100px); } .cube .left{ background: rgba(255,255,0,0.7); transform: rotateY(-90deg) translateZ(100px); } .cube .top{ background: rgba(255,0,255,0.7); transform: rotateX(90deg) translateZ(100px); } .cube .bottom{ background: rgba(0,255,255,0.7); transform: rotateX(-90deg) translateZ(100px); }

我的解决办法是将rgba透明度全部调整至1。如果知道为什么第一段代码我的backface-visibility:hidden;是无效的，麻烦私信我，哈哈~

平移函数translate() 缩放函数scale() 旋转函数rotate() 倾斜函数skew()

十二、outline与border

outline : [outline-size] | [outline-style] | [outline-color] outline-offset 单独分开写，safari不能写在后面，否则无效

#box{ outline:10px solid #ccc; }

#box{ border:10px solid #ccc; }

由上面两个图可以知道，outline是不会影响元素的盒子大小。

border与outline的区别： 1. border是元素盒模型的组成部分之一，如果改变元素的border，元素盒子大小会发生变化。而outline不会变化； 2. 在border中可以设置单边的样式（比如border-top等），而outline四条边都是一样的； 3. border只能向外扩展，而outline-offset，不仅可以向外还可以向元素内部扩展；

//如下面的右图 #box{ width: 100px; height: 100px; border: 10px solid red; outline: 10px solid #ccc; outline-offset: -5px; }