图解css3 -- 笔记2

• text-shadow

text-shadow:none|[color x-offset y-offset blur-radius]

注意：

在ie下，可以使用滤镜filter：shadow(Color=颜色值， Direction=数值， Strength=数值)

其中：Direction用来设置投影的方向，0度在文本的上面，45度在文本的右上角，依次

Strength用来设置阴影的强度

• text-overflow

有两个值：clip不显示省略标记（…）,只剪裁

ellipsis文本溢出时显示省略标记（…）

注意：使用这个属性的时候需要配合overflow:hidden才能生效

• word-wrap

实现长单词和url地址的自动换行

有两个值：norma:默认值，浏览器只在半角空格和连字符的地方进行换行

/break-word将内容在边界内换行，，但是对长串的英文不起作用，也就是说是用来断词而不是断字符的

• word-break（css3）

用来决定自动换行的处理方法，用于设置或检索对象内文本的字内换行，在多种语言下尤为有用,各浏览器下不同

有三个值：normal默认值，根据语言自己的规则换行

break-all强行截断英文单词换行，非亚洲字符自动断开

keep-all不允许字断开，撑破容器，亚洲字符不断开

• white-space

处理元素中的空白格

有以下值：normal：默认值，空白格被浏览器忽略

pre文本空白格会被浏览器扣留，和<pre>相似

nowrap文本不会换行，直到碰到</br>

pre-line合并空白格序列，但保留换行符，、

pre-warp保留空白符序列，但是正常换行

• box-sizing(ie8+)

有三个值：conten-box(默认)/padding-box/border-box

• resize

注意：在ie下不支持

• outline（ie8+）

外轮廓，outline:outline-color || outline-style || outline-width || outline-offset

outline-color：省略后的默认颜色为黑色

outline-style：省略时，默认为none，省略后表示不再对轮廓线进行绘制

outline-width：省略时，默认参数为medium，表示绘制中等宽度的轮廓线

outline-offset:为正值时，表示轮廓边框向外偏移，反之，向内偏移

注意，绘制的时候只能四个方向统一，不能单独绘制，绘制出来的轮廓不会影响布局

• flexbox(不是属性，是一个模块)

通过给一个元素设置display:flex或者inline-flex，那么这个元素就是伸缩容器，

主轴和主轴方向：主轴是主轴方向的延伸，伸缩项目会沿着主轴方向进行布局，但是不一定是水平的，取决于justify-content的属性，如果取值为column的时候，主轴的方向为纵向。

伸缩容器：

1、伸缩流方向：是指伸缩容器主轴方向，伸缩流方向是通过flex-direction属性来设置的，默认是row。

2、伸缩行换行：使用它来处理溢出的伸缩容器的伸缩项目自动换行到下一行以及控制流动的方向，主要通过flex-wrap属性来设置伸缩项目是否换行，默认是nowrap。

3、伸缩方向和换行：flex-flow是flex-direction和flex-wrap的缩写，这两个属性决定了伸缩容器主轴和侧轴。

伸缩项目：

1、 显示顺序：

2、 侧轴对齐：有两种对齐方式：

（1） align-items：设置伸缩容器中包括匿名伸缩项目的对齐项目

（2） align-self：用来设置单独的伸缩容器上腹泻默认的对齐方式。

（3） 匿名伸缩项目，align-self的值永远与其相关联的伸缩容器的align-items的值相同

伸缩项目主轴对齐方式：

justify-park:flex-start(左侧)/center/flex-pack(右侧)/flex-end(l两端)/space-around(扩散)

伸缩项目延侧轴对齐方式：

align-items:flex-start(顶端)/center/flex-end(底部)/baseline(基线)/stretch(拉伸填充整个容器)

伸缩项目行在侧轴的对齐方式：（只有设置flex-wrap:wrap时，并且没有足够的空间将伸缩项目放在同一行中，只有多行时才会生效） （伸缩容器）

align-content:flex-start/center/flex-end/space-between(两端)/space-aroound(扩撒，第一个项目和最后一个项目的空间是中间伸缩项目间距的一半)/stretch

单个伸缩项目对齐方式：

align-self:auto/start/center/end/baseline/stretch

伸缩项目的顺序：

order:数值

指定伸缩项目如何伸缩尺寸：

flex:none|[<flex-grow>(扩展比率)<flex-shrink>(收缩比率)||<flex-basis>(伸缩基准值)]

flex-grow为1时，每个伸缩项目的额外空间大小相等(默认值：0)

flex-strink(默认值：1)

flex-basis:数值|auto(默认值：auto)

指定伸缩容器主轴的伸缩流方向：（伸缩容器）

flex-derection:row/row-reverse/column/column-reverse

换行：（伸缩容器）

flex-wrap:nowrap/wrap(换行)/wrap-reverse

伸缩流方向与换行：（伸缩容器）

flex-flow: 里面可以设置flex-direction和flex-wrap的属性值

• columns(ie10+)

集成了column-width(每列分名列宽度)和column-count(分列列数)两个属性

比如：columns: 9em 2

• column-width

column-width: auto|（数值+单位）

当给column-width:auto的时候，没有什么效果，在没有显性设置的时候都将默认显示一行，但是再配合column-count的时候可以实现分列。

• column-count

column-width: auto|数值

可以认为是指定的最大列数，计算列数可以根据

（容器宽度-列与列间距）/ 列宽度=列数（四舍五入）

• column-gap

column-gap:normal| (数值+单位)

列间距,类似margin和padding，当值过大的时候，会撑破列容器，浏览器就会自动计算列数，知道容器无法容纳时，就会显示一列

• cloumn-rule

列边框，主要用来定义列与列之间的边框宽度、边款样式和边款颜色。类似border

column-rule:<column-rule-width> | <column-rule-style> | <colimn-rule-color>

column-rule-width接受任何值，包括浮点数，也可以使用medium、thin/thick

column-rule-style包含none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset

注意：column-rule-width不会影响列的布局，不占任何空间，而且当边框的宽度大于列与列之间的边距的时候，列边框就会自动消失

• column-span

定义多布局中子元素跨列效果（可以用在标题）

coloum-span: none(不跨越显示所有列) | all(元素跨列显示所有列，并定位在Z轴上)

• column-fill

控制每列的列高效果，当内容不足时，在多列之中，最后会没有足够的内容去填充，通过column-fill来定义多列中，每一列的高度是否同意

column-fill: auto(默认，各列的高度随内容的变化自动变化) | balance(各列的高度会根据内容最多的一列进行高度统一)

• linear-gradient

background-image:linear-gradient(to right , color [6%(位置，可选), … , colorN ])

1、从顶部向底部渐变的可以用：to top / 0deg / 360deg / -360deg

2、从底部向顶部渐变的可以用：to bottom / 180deg / -180deg

3、从左向右渐变：to left / -90deg / 270deg

4、从右向左渐变：to right / 90deg / 270deg

5、从右下角到左上角： to top left / -45deg / 315deg

• radial-gradient

background-image:radial-gradient([类型/<length>，可选]，color[6%(位置，可选), … , colorN )

渐变类型/方向：

circle/ellipse(椭圆)/100px 100px at 50px 150px(圆心在50px 150px处,半径100px 100px)

渐变形状配合位置：

circle at center/top/bottom/left/right/top left/…

重复渐变

1、 repeat-liear-gradient 水平重复渐变，渐变的位置不使用百分号

repeat-liear-gradient(to right，color[6px(位置，可选), … , colorN )

2、 repeat-radial-gradient径向重复渐变，渐变的位置不使用百分号

repeat-radial-gradient([类型/<length>，可选]，color[6px(位置，可选), … , colorN )

2D变形(ie9+) transform

transform:translate()/translateX()/translateY()/scale()/scaleX()/scaleY()/rotate()/skew()/skewX()/skewY()/

matrix():矩阵变形，基于X轴和Y轴重新定位元素的位置

3D变形(ie10+) transform

translate3d()/translate()/scale3d()/scaleZ()/rotate3d()/rotateX() rotateY() rotateZ()/

prespective():指定一个透明投影矩阵/metrix3d()

• transform-origin

改变X/Y轴可以重置元素变形的原点，属性值可以是%、px、 em、top、center、bottom、left、right，可以是一个参数，也可以是两个参数(X轴，Y轴)，设置3d的时候，默认z=0,取值可以是<length>，但是，如果取值是百分比的时候会失效

top = top center = center top = 50% 0

center = center center = 50% 50%

top left = left top = 0% 0%

• transform-style

transform-style:flat(默认值，所有子元素在2平面呈现)|preserve-3d

注意：如果设置为preserve-3d就不能设置overflow:hidden

• perspective

设置该属性，可以设置查看着的位置，并将可视内容映射到一个视锥上，如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面，而且变换不存在景深的概念

这个属性简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。其效应根据

设置的值决定，值越小，用户与3D空间Z平面距离越近，视觉效果更让人深刻，反之。

presective: none(没有3D效果)| <length,值不能是百分比>

注意：：prespective和presective()都可以激活3D效果，但是perspective用在变形元素的父元素上，perspective()用在当前的变形元素上，也可以与其他的transform函数一起使用。

比如：

div {

perspective: 500px;

}

以上的这个效果等同于下面的这个效果

div img {

transform: perspective(500px);

}

• perspective-origin

可以说是用来定义视角的位置，定义在父元素上，即定义perspective属性的元素上，要两者结合起来用，用来决定perspective属性的原点位置，实际上是设置X/Y轴

默认是50% 50%

第一个长度用来来指定X轴上的位置，可以是<length>，left、center、right

第二个长度用来来指定X轴上的位置，可以是<length>，top、center、bottom(长度的100%)

• backface-visibility

决定旋转背面是否可见

backface-visibility:hidden|visible(默认值)

• 2D translate()

可以设置一个值，也可以设置两个值，但是当Y轴没有设置时，默认是0

• 2D scale()

当设置为scale(1,1)时，元素不会有变化，当不设置时，默认值是1

• 2D rotate()

只接受一个值，角度值，去正的时候，默认相对于中心点顺时针，反之。

• 2D skew()

改变元素的形状

• 2D matrix()

matrix(a,b,c,d,e,f)

变换前的原点位置(x,y,z)

计算的出变换后的原点位置(a*x+c*y+e*z, b*x+d*y+f*z, 0*x+0*y+1*z)

1、 位移矩阵 == translate(tx,ty)

matrix(1,0,0,1,tx,ty)

2、 缩放矩阵 ==scale(sx,sy)

matrix(sx,0,0,sy,0,0)

3、 旋转矩阵 == rotate(a)

matrix(cos(a),sin(a),-sin(a),cos(a),0,0)

4、 倾斜矩阵 == skew(ax,ay)

matrix(1,tan(ay),tan(ax),1,0,0)

• 3D translate3d()

translate3d(x,y,z),其中z的取值不能是百分比，不然会无效，z值越大，离观看者就越近

• 3D translateZ()

translate(z)，其中z值为正值时，移的越近，元素变大，反之。

• 3D scale3d()/scaleZ()

注意：以上两个单独使用时没有效果，需要配合其他变形函数一起使用才会有效果

比如：transform：scaleZ(.2) rolate(45deg)

• 3D rolate3d()

rolate3d(x,y,z,a),其中x,y,x是用来描述旋转的矢量值，取值0~1，a是旋转的角度值，为正是顺时针，反之。

• 3D rolateX()

rolateX(a) == rolate(1,0,0,a)

• 3D rolateY()

rolateY(a) == rolate(0,1,0,a)

• 3D rolateZ()

rolateZ(a) == rolate(0,0,1,a)

• 3D 矩阵

matrix3d(x,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)

• css3过渡 transition

在CSS3中，transition是异步的，

transition: transition-property transition-duration transition-timing-function transition-delay;

比如：transition: background 1s linear 1s

transition-property可以是none、all或者单独指定样式 ，指定多个样式时，可以用，分隔

transition-timing-function:

ease(默认值，快到慢，逐渐变慢)、linear(恒速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)、cubic-bezier(p0,p1,p2,p3)[三次贝塞尔曲线，每个值都是从0~1，但是p0和p3的值很容易设置，p1和p2的值是无法设置的，因为它们总在html中，总是(0,0)和(1,1)

• step()

step(<数值>，<start|end(默认)，可选>)

第一个参数是函数间隔的数量

比如：想要动画有7个步骤，并且动画结束的时候发生在最后一步，就设置

transition-timing-function:step(7,end);

• transition-delay

值的设置可以是正数，负数或者0，但是当是非0的时候，需要设置s或者ms,设置为正数的时候，动画不会立即触发，会当到了设定的时间点才会触发，当设置的是负数的时候，动画会从这个时间点就开始触发，之前的动作就会被截断

• animation

animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

animation-name 动画的名称，用来指定关键帧@keyfeames的名字

animation-iteration-count：1(默认) | 数值 | infinite(无限次循环)

animation-play-state：running | paused

animation-fill-mode:none(默认，动画按预期完成，但在完成之后，回到最初状态) | forwards(动画结束之后，继续应用最后关键帧的位置) | backwards(会向应用动画样式时迅速应用动画的初始帧) | both

• 媒体查询

<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>

其中，content=width/height/initial-scale(页面首次加载的缩放级别)/minimun-scale(可视区域的最小缩放级别)/maximun-scale(可视区域的最大放大级别)/user-scalable(用户是否可进行缩放，有yes/no)

• 自定义字体

@font-face{

font-family: “自己一个名字”；

src: url(“xx.eot”);

src:url(“xx.eot?#iefix”) format(“embedded-openType”),

url(“xx.woff”) format(“woff”),

url(“xx.ttf”) format(“ttf”),

url(“xx.svg#NeuesBauenDemo”) format(“svg”);