选择器

https://blog.csdn.net/aoshilang2249/article/details/52578766

背景和边框

border-radius
box-shadow
border-image
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

渐变（Gradients）

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

文字特效

text-shadow: 5px 5px 5px #FF0000; 文字阴影
box-shadow: 10px 10px 5px #888888; 盒子阴影
text-overflow:ellipsis 显示... clip
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
word-break 规定非中日韩文本的换行规则

字体

@font-face

2D转换 transform:

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

3D转换 transform:

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 转换元素的透视视图。

动画 transition: width 2s;

div
{
    animation:myfirst 5s;
}
@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;}
}

多列

column-count: 指定元素应该被分割的列数。
column-gap:40px 属性指定了列与列间的间隙
column-rule-style 列与列间的边框样式
column-rule-width 两列的边框厚度
column-rule-color 两列的边框颜色
column-rule 所有属性的简写
column-span 下实例指定 <h2> 元素跨越所有列
column-width 指定了列的宽度

媒体选择器

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}