这篇文章是对CSS3相关的一些知识，做的一个总结,其中包括 CSS3选择器，CSS3新增属性,CSS3字体属性设置和图片字体的运用CSS3 2D/3D效果，CSS3动画等:
-
CSS3选择器：
- 属性选择器：E为元素标签 [arr]为属性 "val"为属性值 ~="val"为指定词汇 {...}改变的样式
- E[arr]{...} --> E[arr] 用于选取带有指定属性的元素；
- E[arr="val"]{...} --> E[arr="val"] 用于选取带有指定属性和值的元素；
- E[arr~="val"]{...} --> E[arr~="val"] 用于选取属性值中包含指定词汇的元素；
- E[arr|="val"]{...} --> E[arr|="val"] 用于选择有指定值开始的属性值，该值必须是整个单词 a-wuaho；
- E[arr^="val"]{...} --> E[arr^="val"] 匹配属性值中，以指定值开头的每个元素 awuhao；
- E[arr$="val"]{...} --> E[arr$="val"] 匹配属性值中，以指定值结尾的每个元素 ；
- E[arr*="val"]{...} --> E[arr*="val"] 匹配属性值中，包含指定值的每个元素 ；
- 伪类选择器：
=============================================================
1--->: first-child --> 单独指定第一个元素的样式
2--->: last-child --> 单独指定最后一个元素的样式
3--->: nth-child(num) --> 指定序号的子元素使用样式
4--->: nth-last-child(num) --> 指定倒数序号的子元素使用样式
===============先定位置，在选类型==================================
5--->: nth-child(odd) --> 指定的正数下来的奇数子元素使用样式
6--->: nth-child(even) --> 指定的正数下来的偶数子元素使用样式
7--->: nth-last-child(odd) -->指定的倒数下来的奇数子元素使用样式
8--->: nth-last-child(even) --> 指定的倒数下来的偶数子元素使用样式
===========先选类型，在定位置，给同一类的元素编号======================
9--->: nth-of-type(odd) --> 指定的正数下来的奇数子元素使用样式
10--->: nth-of-type(even) --> 指定的正数下来的偶数子元素使用样式
11--->: nth-of-last-type(odd) --> 指定的倒数下来的奇数子元素使用样式
12--->: nth-of-last-type(even) --> 指定的倒数下来的偶数子元素使用样式
==================循环样式========================================
13--->: nth-child(An+B) -->A 为隔着A个序数为一个循环 B为操纵在这个循环中位于哪个位置
=================================================================
14--->: only-child --> 只有一个元素的时候使用，添加样式
- 目标伪类选择器 ：target :突出显示活动的HTML锚 (与锚点结合使用)
- 层级选择器:
- 包含选择器： E F{...}（后代选择器）h3 span{...} -->所有后代；
- 层级选择器： E>F{...}(子选择器) h3>span{...} -->只有子代；
- 相邻兄弟选择器： E+F{...} h3+span{...} -->E F 具有一个相同的父元素，F在E后面，并且相邻；
- 通用兄弟选择器： E~F{...} h3~span{...}
- 【注】，几种常用前缀：(解决CSS3属性兼容性问题) 1,-webkit- 2,-moz- 3,-ms- 4,-o-
-
CSS3字体属性设置和图片字体的运用:
- 服务器端字体：把字体文件一起上传到服务器端，用户使用的时候，调用这个字体文件在缓存区中;
@font-face{ font-family:WebFont;//WebFont为自己定义的字体的名称 src:url("font/....")format("opentype");//src字体在服务器上加载的字体文件路径; 【注】format为字体文件的格式， 字体文件格式有Opentype 和 Truetype ,其值分别为 opentype 和 truetype ,文件扩展名 .oty 和 .tty } div {font-family:WebFont;}
- iconfont :图标字体 -->优点：体积小，维护性好（可以任意拉伸，改变颜色等）;【注】阿里巴巴矢量图标库（可以下载相关代码）
-
CSS3新增属性:
- 背景属性:
- background-clip -->背景裁切方式:
background-clip: border-box; --> 背景被裁到边框盒（默认）
background-clip: padding-box; --> 背景被裁到内边距框
background-clip: content-box; --> 背景被裁到内容框- background-origin -->定义背景图片的起始位置:
background-origin: border-box; --> 背景起始位置在边框盒
background-origin: padding-box; --> 背景起始位置在内边距框（默认）
background-origin: content-box; --> 背景起始位置在内容框;background-size -->背景图片的大小:
background-size: length; --> 设置背景图片的宽度和高度 ，第一个值为宽度，第二个值为高度background-size:50px 50px;
background-size: percentage; --> 以父元素的百分比来设置图片的宽度和高度；background-size:50% 50%;
background-size: cover; --> 背景图片扩展(把图片以容器最宽的一条边，进行等比例缩放，超出不显示)
background-size: contain; --> 把图像扩展到最大尺寸（把图片以容器最短的那条边，进行等比例缩放，铺不满不管）;【注】，CSS3提供了 在一个容器中可以插入多张背景图 background-image:url(...),url(...);
- 边框属性:
- border-radius -->边框圆角:
border-radius：15px;
border-radius:18px 39px;-->成对角线出现
border-radius:10px 3px 5px 45px;- 用图片来做边框:
border-image: url(....)A B C D / border-image-width border-image-repeat;
url(....) --> 图片的路径
A B C D --> 为浏览器自动把图片分割成九宫格的时侯，输入的上 右 下 左边距的值，没有单位
border-image-width --> 边框的宽度
border-image-repeat -->边框展开方式(1,repeat --> 平铺； 2,round --> 循环； 3,stretch --> 拉伸)- 盒阴影 -->让盒在显示时产生阴影效果:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow -->水平阴影的位置（必写）
v-shadow -->垂直阴影的位置（必写）
blur -->模糊距离（可选）
spread -->阴影的尺寸（可选）
color -->阴影的颜色（可选）
inset -->将外部阴影（outset）改为内部阴影 ;
-
2D效果:
- CSS3过度:
//--->transition属性： transition-property:; -->规定过度应用的CSS属性(多个的时候之间用逗号隔开，所有的时候用all) transition-duration:; -->过度效果花费的时间 transition-timing-function -->规定过度效果的时间曲线，默认为ease 常用的：linear ease -->慢到快；linear -->匀速；ease-in -->慢速开始；ease-out -->慢速结束；easr-in-out -->慢速开始和结束 cubic-bezier(n,n,n,n) transition-delay:; -->规定过度效果何时开始;
- 2D变形：
//--->transform属性： transform:rotate(num deg,num deg)/rotateX(xdeg)/rotateY(y deg); -->旋转,取值用的是角度 deg表示它的单位,沿着X方向和沿着Y方向) transform:skew（x,y）/skewX(x)/skewY(y); -->扭曲 -->扭曲(沿着X方向和沿着Y方向) -->x,y取值为角度值， transform:scale(x,y)/scaleX(x)/scaleY(y); -->缩放(沿着X方向和沿着Y方向) -->x,y取值为倍数值，大于1放大，小于1缩小 transform:translate(x,y)/translate(x)/translate(y); -->移动(沿着X方向和沿着Y方向) transform:matrix; -->矩阵变形 transform-origin:left top;-->改变中心点的位置;
-
3D效果:
- 3D效果：
//-->transform的转换属性 3D位移 translateZ()/translate3d()函数的使用 Z:以方框中心为原点，正数变大，负数变小 3D旋转 rotateX()/rotateY()/rotateZ() Z:以方框中心为原点，正数顺时针旋转，负数逆时针旋转 3D缩放 scaleX()/scaleY()/scaleZ()/scale3d() transform-origin:left top;-->允许你改变被转换元素的位置 transform-style:flat(默认，子元素将不保留其3D位置)/preserve-3d(子元素保留其3D位置) -->规定被嵌套元素如何在3D空间中显示 （开启3D模式的一个属性） prespective -->规定3D元素的透视效果 (视点值) presrective-origin -->规定3D元素底部位置（视点位置） backface-visibility:visible（默认可见）/hidden;（不可见） -->规定元素在不面对屏幕时是否可见
-
CSS3动画:
- 过度动画：
//transition属性： transition-property:; -->规定过度应用的CSS属性(多个的时候之间用逗号隔开，所有的时候用all) transition-duration:; -->过度效果花费的时间 transition-timing-function -->规定过度效果的时间曲线，默认为ease 常用的：linear ease -->慢到快；linear -->匀速；ease-in -->慢速开始；ease-out -->慢速结束；easr-in-out -->慢速开始和结束 cubic-bezier(n,n,n,n) transition-delay:; -->规定过度效果何时开始
- 关键帧动画：
//语法格式： @keyframes animationname{ keyframes-selector{CSS-style}; } keyframes-selector可以是from 和 to /或者是 0% 25% 50% ... 100%; //动画属性： animation -->属性简写 animation-name -->规定@keyframes的动画名 animation-duration -->规定动画完成一个周期所需要的时间 animation-timing-function -->规定3D元素透视效果 animation-delay -->规定动画从何时开始 animation-iteration-count -->规定动画被播放的次数，默认为1 （infinite）为无限次播放 animation-direction -->normal:默认值，动画正常播放; alternate:动画轮流反向播放 animation-play-state -->paused: 动画暂停； running:动画正在播放； (和javascript一起配合使用)
5585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
