css3选择器-属性选择器：
1、E[attr]：只使用属性名，但没有确定任何属性值；
2、E[attr =”value”]：指定属性名，并指定了该属性的属性值；
3、E[attr ~=”value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
4、E[attr ^=”value”]：指定了属性名，并且有属性值，属性值是以value开头的；
5、E[attr $=”value”]：指定了属性名，并且有属性值，而且属性值是以value结束的
6、E[attr *=”value”]：指定了属性名，并且有属性值，而且属值中包含了value
7、E[attr |=”value”]：指定了属性名，并且属性值是value或者以“value-”开头的值;
css3选择器-结构性伪类选择器：
X-frist-child 其父元素的首个元素。IE7就可以支持
X-last-child 匹配父元素中最后一个X元素
X-nth-chlid（n）用于匹配索引值为n的子元素。索引值从1开始。
X:nth-last-child(n)从最后一个开始算索引。
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:first-of-type匹配同级兄弟元素中的第一个X元素；
X:last-of-type匹配同级兄弟元素中的最后一个X元素
X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X
X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素 X:only-of-type匹配属于同类型中唯一兄弟元素的X
X :root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML X:empty匹配没有任何子元素（包括包含文本）的元素X
css3选择器：
目标伪类选择器：
：target 选择器匹配E的所有元素，且匹配元素呗相关URL指向
UI 元素状态伪类选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素
E ::selection 匹配E元素中被用户选中或处于高亮状态的部 分
:link :hover :visited :active
E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点
语言伪类选择器:E:lang(en)
否定伪类 选择器 E:not(选择器) （IE6-8浏览器不支持:not()选择器。）匹配所有不匹配简单选择符s的元素E
css3文本属性；text-shadow： 1px 2px 5px red; 1px水平 2px垂直 5px模糊度 red颜色
文本阴影属性语法及应用语法：text-shadow
说明：水平、垂直阴影的位置允许负值 可进行多阴影设置
盒子的阴影属性 box-shadow :水平 垂直 模糊 颜色; inset阴影向内
box-shadow:水平 垂直 模糊 颜色; inset阴影向内
css3多行文本隐藏：
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
CSS背景的新增属性
background-size 规定背景图像的尺寸
CSS3边框属性
1、border-colorborder-color:red green #000 yellow;(上右下左)
2、border-image border-image 属性是一个简写属性，用于设置以下属性
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
3、Border-radius 圆角边框
CSS3 渐变
1.线性渐变
语法：background:linear-gradient(direction,color-stop1,color-stop2,…);
说明：
direction: 默认为 to bottom ，就是从上向下的渐变；
stop：颜色的分布位置，默认均匀分布， 例如有3个颜色，各个颜色的stop均为33.33%。
div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } / 浏览器默认值 /
div { background:linear-gradient(to top, red , blue) }
分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变
div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }
分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变
2.径向渐变
径向渐变不同于线性渐变，线性渐变是从”一个方向” 向 “另一个”的颜色渐变，而径向渐变是从”一个点” 向四周的颜色渐变
语法：
径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变
说明：
center：渐变起点的位置，可以为百分比，默认是图形的正中心。
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；
farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角
3.重复渐变
div{background:repeating-linear-gradient( red, yellow 10%, green 20%);}
说明：
10%的位置为yellow，20%的位置为green，然后按照这20%向下重复
CSS3 过渡
transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
transition-property：检索或设置对象中的参与过渡的属性
transition-duration：检索或设置对象过渡的持续时间
transition-delay：检索或设置对象延迟过渡的时间
transition-timing-function：检索或设置对象中过渡的动画类型
简写：
transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型
贝塞尔曲线：
属性值：cubic-bezier()
贝塞尔曲线网址：http://cubic-bezier.com/
CSS3 2D
transform
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey()
将元素向指定的方向移动，类似于position中的relative。
1、translate( ) 移动
水平移动：
向右移动translate(tx,0)和向左移动translate(-tx,0)；
垂直移动：
向上移动translate(0,-ty)和向下移动translate(0,ty);
对角移动：
右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。
translateX()：
水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。
translateY()：
纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。
这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。
所以
transform:translate(-100px,0)实际上等于transform:translateX(-100px);
transform:translate(0,-100px)实际上等于transform:translateY(-100px)。
2、scale() 缩放
让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。
例如，
scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
3、rotate() 旋转
旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
4、skew() 倾斜
倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
transform-origin 变形原点
transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew等操作都是以元素自己中心位置进行变化的。
位移，缩放，旋转， 先写位移后写缩放，旋转
transform：rotateY（90deg） translateX（100px）
CSS3 3D
CSS3中的3D变换主要包括以下几种功能函数：
3D位移：
CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
3D旋转：
CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3D缩放：
CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
景深perspective (透视)
近大远小 景深
程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective: 1200px;（在父元素中使用）
transform:perspective(1200px) （在子元素中使用）
两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
动画 （有两个方法）
CSS3属性中有关于制作动画的三个属性：
transform,transition,animation
@keyframes
1.@keyframes mymove{ from{初始状态属性}
to{结束状态属性}
}
或
2.@keyframes mymove{
0%{初始状态属性}
100%{结束状态属性}
}（中间再可以添加关键帧）
animation和transition的区别
相同点：
都是随着时间改变元素的属性值。
不同点：
transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。
animation
animation复合属性。检索或设置对象所应用的动画特效。
1.animation-name 检索或设置对象所应用的动画名称
说明：
必须与规则@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove
2.animation-duration 检索或设置对象动画的持续时间
说明：
animation-duration:3s; 动画完成使用的时间为3s
3.animation-timing-function 检索或设置对象动画的过渡类型
说明：
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
4.animation-delay 检索或设置对象动画延迟的时间
说明：
animation-delay:0.5s; 动画开始前延迟的时间为0.5s)
5.animation-iteration-count 检索或设置对象动画的循环次数
说明：
animation-iteration-count: infinite | number;
infinite：无限循环
number: 循环的次数
6.animation-direction 检索或设置对象动画在循环中是否反向运动
说明：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
7.animation-play-state 检索或设置对象动画的状态
说明：
animation-play-state:running | paused;
running:运动
paused: 暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
新版弹性盒
1、display:flex
2、flex-direction（主轴排列方式）
说明:
顺序指定了弹性子元素在父容器中的位置
row 默认在一行内排列
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3、justify-content（主轴对齐方式）
说明：
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
■ flex-start默认，顶端对齐
■ flex-end末端对齐
■ center居中对齐
■ space-between两端对齐，中间自动分配
■ space-around自动分配距离
4、align-items（侧轴对齐方式）
说明：
侧轴对齐方式
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
5、flex-wrap
说明：
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
6、align-content（行与行之间对齐方式）
说明：
当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <’ justify-content’> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
■ flex-start没有行间距
■ flex-end底对齐没有行间距
■ center居中没有行间距
■ space-between两端对齐，中间自动分配
■ space-around自动分配距离
7、align-self
说明：
align-self 属性规定灵活容器内被选中项目的对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
Stretch 元素被拉伸以适应容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
8、order
说明：
number排序优先级，数字越大越往后排，默认为0，支持负数。
9、flex
说明：
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
缩写「flex: 1」, 则其计算值为「1 1 0%」
缩写「flex: auto」, 则其计算值为「1 1 auto」
flex: none」, 则其计算值为「0 0 auto」
flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
10、flex三个属性值介绍
flex-grow
一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink
一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis
项目的长度
若有收获，就点个赞吧
0 人点赞
