CSS2 CSS函数

0.CSS注释一定要注意，不止一次被注释影响到下面的样式了。

1.linear-gradient线性变化图形

background-image: linear-gradient(red, yellow, blue); 函数用于创建一个线性渐变的 "图像"。红-黄-蓝。

2.css动画实现

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome /infinite是循环的意思*/
    -o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst{
    0% {background:red;}
    100% {background:yellow;}
}

3.media查询:一般放在css后面做自适应，用来覆盖前面的样式以达自适应效果。

//media查询，做自适应调整。下面是根据屏幕可视化区域的最小宽度和最大宽度范围给定样式。
@media screen and (min-width: 1279px) and (max-width: 1288px){
		.pan-index-baseBody { 
 			background: black;
 		}
 		.pan-index-star { 
 			background: black;
            width: 950px;//给定宽高做自适应
  			height: 448px;
 		} 
	}
//获取当前可视化区域的宽度
document.documentElement.clientWidth ;
可以根据元素两个三个四个五个的宽度,和当前可视化区域的宽度范围，来做整体的一个居中和自适应

4.@font-face：做图标字体的时候用到了。https://www.cnblogs.com/sqh17/p/9986444.html

指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：

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

5.css函数：https://www.runoob.com/cssref/css-functions.html

calc()用于计算；比如：width:calc(100% - 100px) 用于创建两边空50px的元素

cubic-bezier() 贝塞尔曲线可用于 animation-timing-function 和 transition-timing-function 属性。
 animation-timing-function动画延时时间，用于动画效果
 transition-timing-function过渡延时时间：用于Hover等伪类事件的时候改变width等属性

6.$(e.target）绑定事件，通过事件e.target获取点击元素的一些属性；

var target = $(e.target）;
var id = target.parent().attr('id');
openModifyDialog(id);
e.stopPropagation();

7.显示鼠标指针的位置：

$(document).mousemove(function(e){
  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});