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"。normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded
font-style                可选。定义字体的样式。默认是 "normal"。normalitalicoblique
​
font-weight               可选。定义字体的粗细。默认是 "normal"。normalbold100 -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;        //时长 1stransition-timing-function:linear; //效果transition-delay:2s;            //延时2s
}
​
div:hover
{width:200px;
}
​

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

12.动画

1.@keyframes 创建动画

@keyframes myfirst
{from {background: red;}to {background: yellow;}
}
​
或
​
@keyframes myfirst
{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}
}
​
或
​
@keyframes myfirst
{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}
}

2.使用

div
{animation: myfirst 5s;-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
​
或
​
div
{animation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running;/* Safari 与 Chrome: */-webkit-animation-name: myfirst;-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;
}
​
或
​
div
{animation: myfirst 5s linear 2s infinite alternate;/* Safari 与 Chrome: */-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

13.多列

一段文字 多列显示 给元素添加 column-count:3; 就可以了。

1.column-count:n;指定需要分割的列数

div{column-count:3;
}

2.column-gap 指定列与列间的间隙

div { column-gap:40px }

3.column-rule-style指定了列与列间的边框样式

div { column-rule-style: solid; }
solid  /  dotted

4.column-rule-color指定了两列的边框颜色

div { column-rule-color: #f00; }

5.column-rule-width指定了两列的边框厚度

div{ column-rule-width:5px }

6.column-rule 是column-rule-*所有属性的简写

div{ column-rule :1px solid #f00 }

7.column-span 指定元素跨越多少列

h1{ column-span:all}

8.column-width指定列的宽度

div{ column-width:100px;} 

9.column-fill 指定如何填充列

div { column-fill:balance | auto}

10.columns指定列的宽度和数量

div { columns:100px 3 }

14.用户界面

1.resize 指定一个元素是否应该由用户去调整大小

div{resize:both;overflow:auto;
}

2.box-sizing

box-sizing : content-box; 元素定义的宽度 就是他的内容宽度 不包含内边距和边框

box-sizing : border-box；元素定义的宽度 包含他的内边距和边框

15.filter() 滤镜

提示: 使用空格分隔多个滤镜。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

修改所有图片的颜色为黑白 (100% 灰度):
img {-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */filter: grayscale(100%);
}
​
图片使用高斯模糊效果：
img {-webkit-filter: blur(5px); /* Chrome, Safari, Opera */filter: blur(5px);
}
​
使图片变亮:
img {-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */filter: brightness(200%);
}
​
调整图像的对比度:
img {-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */filter: contrast(200%);
}
​
给图像设置一个阴影效果:
img {-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */filter: drop-shadow(8px 8px 10px red);
}
​
给图像应用色相旋转:
img {-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */filter: hue-rotate(90deg);
}
​
反转输入图像:
img {-webkit-filter: invert(100%); /* Chrome, Safari, Opera */filter: invert(100%);
}
​
转化图像的透明程度:
img {-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */filter: opacity(30%);
}
​
转换图像饱和度:
img {-webkit-filter: saturate(800%); /* Chrome, Safari, Opera */filter: saturate(800%);
}
​
将图像转换为深褐色:
img {-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */filter: sepia(100%);
}
​
复合函数
使用多个滤镜，每个滤镜使用空格分隔。
注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。
img {-webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */filter: contrast(200%) brightness(150%);
}

16.flex 弹性布局

一.flex-direction 容器内元素的排列方向(默认横向排列)

1：flex-direction:row; 沿水平主轴让元素从左向右排列

2：flex-direction:column; 让元素沿垂直主轴从上到下垂直排列

3：flex-direction:row-reverse;沿水平主轴让元素从右向左排列

二、flex-wrap 容器内元素的换行(默认不换行)

1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%； 2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；

三、justify-content 元素在主轴（页面）上的排列

1：justify-content : center;元素在主轴（页面）上居中排列

2：justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列

3：justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列

4：justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列

5：justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。

四、align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

1：align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）

2：align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）

3：align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）

4：align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。（靠上对齐）

五、align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

1：align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠

2:align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。

3:align-content: center ; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。

4:align-content: stretch; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。

5:align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

6:align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。

17.多媒体查询 @media

CSS3 多媒体类型

//可视窗口尺寸小于 480 像素的设备上修改背景颜色
@media screen and (min-width: 480px) {  body {background-color: lightgreen;}
}
​
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {.example {background: red;}
}
​
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {.example {background: green;}
}
​
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width:991px) {.example {background: blue;}
} 
​
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width:1199px) {.example {background: orange;}
} 
​
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {.example {background: pink;}
}

18.css

1.相邻兄弟选择器

选择紧接在另一元素后的元素，且二者有相同父元素。
div+p{//
}

2.后续兄弟选择器

选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>
div~p
{background-color:yellow;
}

3.伪类

1.a的伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

2.:first-child 伪类

可以使用 :first-child 伪类来选择父元素的第一个子元素。

在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：
p > i:first-child
{color:blue;
}
​
=============
​
匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
p:first-child i
{color:blue;
}

4.伪元素

1.:first-line

对 p 元素的第一行文本进行格式化   "first-line" 伪元素只能用于块级元素。
p:first-line 
{color:#ff0000;font-variant:small-caps;
}

2.:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式 "first-letter" 伪元素只能用于块级元素。 
p:first-letter 
{color:#ff0000;font-size:xx-large;
}
​
​
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。

3.:before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片：
h1:before 
{content:url(smiley.gif);
}

4.:after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
h1:after
{content:url(smiley.gif);
}

5.其他伪类

5.属性选择器

<p title="text"> ddd</p>
[title]{//
}
[title="text"]{//
}