常用css3整理

1. CSS实现单行、多行文本溢出显示省略号（…）

单行文本的溢出

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
//适用于WebKit浏览器及移动端；
//-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
//display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
//-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

2.transform属性（2D变形或3D变形）

当有多个变形函数时，使用（，）间隔各函数。这时以从左到右的顺序适用各变形函数

transform: translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY(), matrix3d();

• 移动

translate(x方向移动距离,y方向移动距离)
translateX(X方向移动距离)
translateY(Y方向移动距离)
translateZ(Z方向移动距离)
translate3d(X方向移动距离,Y方向移动距离,Z方向移动距离)

• 尺寸缩放

scale(x方向尺寸缩放,y方向尺寸缩放)
scaleX(X方向尺寸缩放)
scaleY(Y方向尺寸缩放)
scaleZ(Z方向尺寸缩放)
scale3d(X方向尺寸缩放,Y方向尺寸缩放,Z方向尺寸缩放)

• 旋转

rotate(旋转角度)
rotate3d(数值，数值，数值，旋转角度)
rotateX(以X轴为轴心旋转的角度)
rotateY(以Y轴为轴心旋转的角度)
rotateZ(以Z轴为轴心旋转的角度)

• 倾斜

skew(X轴倾斜角度，Y轴倾斜角度)
skewX(X轴的倾斜角度)
skewY(Y轴的倾斜角度)

• 远近效果

perspective(数值)

3.时间过渡效果 transition

transition属性是 transition-property属性、transition-duration属性、 transition-timing-function属性、 transition-delay属性的简写体

transition: background-color 1s linear 0 , width 1s linear 0 , height 1s linear 0;

或者

transition: all 1s linear 0;

4.动漫效果 animation

@keyframes（定义动画的具体动作）

@keyframes  anim1 {
from{left:0px;background-color:red;}
to {left:250px;}
}

或者

@keyframes mymove {
0%   {left: 0px;}
25%  {left: 200px;}
50%  {left: 100px;}
75%  {left: 200px;}
100% {left: 0px;}
}

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

animation: anim1 3s ease-out 1s infinite alternate forwards;

解释

• animation-direction（指定动画是否反向播放）

它的值分别有： 动画正常运行／动画反方向运行／动画先正常运行再反方向运行，并持续交替运行／保持原有属性的值／继承母元素的设定
对应设置如下：

animation-direction:  normal|reverse|alternate|alternate-reverse|initial|inherit;

• animation-fill-mode（指定动画不运行时的状态）

它的值分别有： 动画开始之前或结束之后，不会提供给该当元素以任何样式/当动画结束时，该当元素将保持动画结束时的状态/动画开始之前，该当元素使用动画开始时的样式/动画开始前，该当元素使用动画开始时的样式，结束后，该当元素使用动画结束时的样式/保持原有属性的值/继承母元素的设定
对应设置如下：

animation-fill-mode:  none|forwards|backwards|both|initial|inherit;

• animation-play-state（定义动画是运行还是暂停）

它的值分别有： 指定动画暂停/指定动画运行/保持原有属性的值/继承母元素的设定
对应设置如下：

animation-play-state:  paused/running/initial/inherit;

• animation-timing-function（定义动画的速度曲线）

它的值分别有：匀速运行/开始缓慢，中途加速，最终以减速结束/以缓慢运行开始/以缓慢运行结束/开始缓慢运行,又逐渐加速，最后又减速直到结束/使用cubic-bezier函数定义自己的值，值为0～1之间的数值/保持原有属性的值/继承母元素的设定
对应设置如下

animation-timing-function: linear/ease/ease-in/ease-out/cubic-bezier(n,n,n,n)/initial/inherit;

5. linear-gradient（添加线性渐变）

• linear-gradient(开始位置 角度,开始颜色 位置,结束颜色 位置);
• Firefox浏览器 //-moz-linear-gradient(开始位置 角度，开始颜色 位置，结束颜色 位置）
• Chrome、Safari浏览器 //-webkit-gradient(linear,开始位置，结束位置，from(开始颜色),to(结束颜色))

实例：

background-image: linear-gradient:(left 45deg, red, blue);
background: -moz-linear-gradient(left, #3992D0, rgba(227, 157, 168, 0.5));
background: -webkit-gradient(left, #3992D0, rgba(227, 157, 168, 0.5));

解释说明：

background: -moz-linear-gradient(top,  #bccfe3 0%, #d2dded 100%);  适合 FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#036), color-stop(100%,#d2d)); 适合 Chrome,Safari4+
background: -webkit-linear-gradient(top,  #bcc 0%,#d2d 100%);  适合Chrome10+,Safari5.1+
background: -o-linear-gradient(top, #bccfe3 0%,#d2dded 100%);  适合Opera 11.10+
background: -ms-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合IE10+
background: linear-gradient(top, #bccfe3 0%,#d2dded 100%);     适合W3C
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B2FFFFFF', endColorstr='#00FFFFFF',GradientType=0 ); /* IE6-9 */

6. 阴影

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
div {box-shadow:inset x-offset y-offset blur-radius spread-radius color}

div {
    box-shadow:inset 1px 1px 10px 5px red; // 背景阴影
    text-shadow: 1px 1px 10px red; //文字阴影
} 

7. 文字描边

内描边

.strok-outside {
    -webkit-text-stroke: 2px red;
}

外描边

.strok-outside {
    text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;
}

7. 文字渐变

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 24px;
    font-family: '微软雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};

8. Flex 布局 (弹性布局)

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

.box{
  display: flex;
  //display: inline-flex; //行内元素也可以使用 Flex 布局
}

容器的属性:

flex-direction: 项目的排列方向

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap: 如何换行

• nowrap（默认）：不换行
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

flex-flow: flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content: 定义了项目在主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items: 定义项目在交叉轴上如何对齐

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

项目的属性:

order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self： 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.box {
  flex-direction: row | row-reverse | column | column-reverse;  //决定主轴的方向（即项目的排列方向）
  flex-wrap: nowrap | wrap | wrap-reverse; //决定主轴如何换行
  flex-flow: <flex-direction> || <flex-wrap>; // 默认值为row nowrap
  justify-content: flex-start | flex-end | center | space-between | space-around; //定义了项目在主轴上的对齐方式
  align-items: flex-start | flex-end | center | baseline | stretch; // 定义项目在交叉轴上如何对齐
  align-content: flex-start | flex-end | center | space-between | space-around | stretch; // 定义了多根轴线的对齐方式
}
.item {
  order: <integer>;/* default 0 */
  flex-grow: <number>; /* default 0 */
  flex-shrink: <number>; /* default 1 */
  flex-basis: <length> | auto; /* default auto 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间*/
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /* 默认值为0 1 auto， 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。*/
  align-self: auto | flex-start | flex-end | center | baseline | stretch; /* 默认值为auto */
}

9. 毛玻璃效果：背景图 + 伪类 + flite:blur(3px)

.demo1{  
    width: 500px;  
    height: 300px;  
    line-height: 50px;  
    text-align: center;  
}  
.demo1:before{  
    background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;  
    background-size: cover;  
    width: 500px;  
    height: 300px;  
    content: "";  
    position: absolute;  
    top: 0;  
    left: 0;  
    z-index: -1;/*-1 可以当背景*/  
    -webkit-filter: blur(3px);  
    filter: blur(3px);  
}  
<div class="demo1">背景图半透明，文字不透明<br />方法：背景图+ filter：blur</div>  

10. CSS3新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break

• background-clip属性： 用于确定背景画区，有以下几种可能的属性：

    background-clip: border-box; //背景从border开始显示
    background-clip: padding-box; //背景从padding开始显示
    background-clip: content-box; //背景显content区域开始显示
    background-clip: no-clip; //默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。

• background-origin: 规定背景图片的定位区域，它的属性也有border-box、padding-box、content-box 这3种属性，但要注意他的描述是“背景图片”，也就是说它只能对背景做样式上的操作，它相当于positon,规定了图片开始绘制的的区域，也就是它只相当于规定图片的左上角从什么地方开始，其他的它就不负责了；它通常与background-position联合使用

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position

• background-size: 常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

background-size: contain; //缩小图片以适合元素（维持像素长宽比）
background-size: cover; //扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; //缩小图片至指定的大小
background-size: 50% 100%; //缩小图片至指定的大小，百分比是相对包 含元素的尺寸

• background-break: CSS3中，元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景。

11. @font-face特性

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}
div{
    font-family:myFirstFont;
}

12. 多列布局

三个属性：

column-count: 规定元素应该被分隔的列数。
column-gap: 规定列之间的间隔。
column-rule: 设置列之间的宽度、样式和颜色规则

div{
    -moz-column-count:3;    /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    -moz-column-gap:40px;       /* Firefox */
    -webkit-column-gap:40px;    /* Safari 和 Chrome */
    column-gap:40px;
    -moz-column-rule:3px outset #ff0000;    /* Firefox */
    -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
    column-rule:3px outset #ff0000;
}

13. text文本

• white-space:normal | pre | nowrap | pre-wrap | pre-line 设置或检索对象内空格的处理方式。
  normal： 默认处理方式。
  pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
  nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
  pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
  pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
• word-break：normal | keep-all | break-all 设置或检索对象内文本的字内换行行为。
  normal： 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
  keep-all： 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
  break-all： 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。
• word-wrap：normal | break-word 设置或检索当内容超过指定容器的边界时是否断行
  normal： 允许内容顶开或溢出指定的容器边界。
  break-word： 内容将在边界内换行。如果需要，单词内部允许断行。
• text-align：start | end | left | right | center | justify | match-parent | justify-all
  left： 内容左对齐。
  center： 内容居中对齐。
  right： 内容右对齐。
  justify： 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
  start： 内容对齐开始边界。（CSS3）
  end： 内容对齐结束边界。（CSS3）
  match-parent： 这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的，计算值可以是 left 和 right 。（CSS3）
  justify-all： 效果等同于 justify，但还会让最后一行也两端对齐。（CSS3）
• word-spacing：normal | <length> | <percentage> 检索或设置对象中的单词之间的最小，最大和最佳间隙。
  normal：默认间隔
  <length>：用长度值指定间隔。可以为负值。
  <percentage>：用百分比指定间隔。可以为负值。（CSS3）
• letter-spacing：normal | <length> | <percentage> 检索或设置对象中的字符之间的最小，最大和最佳间隙。
  normal：默认间隔
  <length>：用长度值指定间隔。可以为负值。
  <percentage>：用百分比指定间隔。可以为负值。（CSS3）
• vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> 设置或检索内联元素在行框内的垂直对其方式。
  baseline：将支持valign特性的对象的内容与基线对齐
  sub：垂直对齐文本的下标
  super：垂直对齐文本的上标
  top：将支持valign特性的对象的内容与对象顶端对齐
  text-top：将支持valign特性的对象的文本与对象顶端对齐
  middle：将支持valign特性的对象的内容与对象中部对齐
  bottom：将支持valign特性的对象的文本与对象底端对齐
  text-bottom：将支持valign特性的对象的文本与对象顶端对齐
  <percentage>：用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
  <length>：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）