css / css3 基础知识

1.text-shadow 文本阴影

 text-shadow: 5px 5px 5px #FF0000;

 

2.box-shadow 盒子阴影

box-shadow: 10px 10px 5px #888888;
​
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 卡片效果
  box-shadow 的顺序依次为:
 h-shadow   v-shadow   blur   spread   color   insect
水平阴影    垂直阴影   模糊    阴影尺寸  颜色   外阴影转到内阴影 

 

3.text-overflow 文本溢出

width: 200px;
text-overflow: clip|ellipsis|string;   //文本溢出 如何显示溢出内容
    clip // 修剪文本
    ellipsis //显示省略符号来代表被修剪的文本
    string //使用给定的字符串来代表被修剪的文本
    
.ellipsis{  //常用方法  文字内容超过宽度 变...
    white-space:nowrap;  //不换行
    overflow:hidden; 
    width:100%;
    text-overflow:ellipsis
}
​

4.word-wrap 换行

word-wrap: normal|break-word;
    normal  只在允许的断字点换行（浏览器保持默认处理）。
    break-word   在长单词或 URL 地址内部进行换行。 允许长单词或 URL 地址换行到下一行

5.word-break换行

word-break: normal|break-all|keep-all;
​
值           描述
normal      使用浏览器默认的换行规则。
break-all   允许在单词内换行。
keep-all    只能在半角空格或连字符处换行。

 

6.white-space 元素内的空白怎样处理

white-space:
    值           描述
    normal      默认。空白会被浏览器忽略。
    pre         空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap      文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    pre-wrap    保留空白符序列，但是正常地进行换行。
    pre-line    合并空白符序列，但是保留换行符。
    inherit     规定应该从父元素继承 white-space 属性的值。

7.text-align 文字对其方式

值           描述
left        把文本排列到左边。默认值：由浏览器决定。
right       把文本排列到右边。
center      把文本排列到中间。
justify     实现两端对齐文本效果。
inherit     规定应该从父元素继承 text-align 属性的值。

8. @font-face 引入指定字体

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
@font-face：
    描述符     值         描述
font-family   name      必需。规定字体的名称。
src            URL      必需。定义字体文件的 URL。
font-stretch            可选。定义如何拉伸字体。默认是 "normal"。
            normal
            condensed
            ultra-condensed
            extra-condensed
            semi-condensed
            expanded
            semi-expanded
            extra-expanded
            ultra-expanded
font-style                可选。定义字体的样式。默认是 "normal"。
            normal
            italic
            oblique
​
font-weight               可选。定义字体的粗细。默认是 "normal"。
            normal
            bold
            100 -900
​
unicode-range   unicode-range   可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。  

9. transform 2D 转换 （移动、缩放、转动、拉长或拉伸）

### 1.translate()  移动

transform: translate(50px,100px);   元素向X轴移动50像素  Y轴移动100像素

2.rotate() 旋转

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform: rotate(30deg);   //顺时针旋转30度。

3.scale() 缩放

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
transform: scale(2,3);   //宽度*2   高度*3
transform: scale(1,4);   //宽度不变  高度*4
​

4. skew() 倾斜转换

transform: skew(30deg,20deg);  //元素在X轴和Y轴上倾斜30度20度。
            skewX;表示只在X轴(水平方向)倾斜。
            skewY;表示只在Y轴(垂直方向)倾斜。

5.matrix()

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
利用matrix()方法旋转div元素30°:
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);

10.transform 3D转换

matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)    定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)  定义 3D 转化。
translateX(x)       定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)       定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)       定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)      定义 3D 缩放转换。
scaleX(x)           定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)           定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)           定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle)      定义沿 X 轴的 3D 旋转。
rotateY(angle)      定义沿 Y 轴的 3D 旋转。
rotateZ(angle)      定义沿 Z 轴的 3D 旋转。
perspective(n)      定义 3D 转换元素的透视视图。
​
2d转换 只能在平面上转换
3d转换 是在立体空间中转换

11. transition 过渡

例子：  鼠标移入div上  宽度2s内变为200px   高度2s内变为200px 2s内转换180°
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
}
​
div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
​
过渡属性：
transition              简写属性，用于在一个属性中设置四个过渡属性。  
transition-property      规定应用过渡的 CSS 属性的名称。 
transition-duration      定义过渡效果花费的时间。默认是 0。 
transition-timing-function  规定过渡效果的时间曲线。默认是 "ease"。 
transition-delay         规定过渡效果何时开始。默认是 0。
​
​
div
{
    width:100px;
    height:100px;
    background:red;
    transition-property:width;     //宽度过渡
    transition-duration:1s;        //时长 1s
    transition-timing-function:linear; //效果
    transition-delay:2s;            //延时2s
}
​
div:hover
{
    width:200px;
}
​

1.transition-timing-function 切换效果的速度

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至