常用css3整理

浏览: 156 发布日期: 2017-12-18 分类: 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)
返回顶部