HTML总结

设置块阴影：

box-shadow:阴影水平偏移 阴影垂直偏移 阴影模糊值 阴影边框 阴影颜色;

box-shadow:length length length length color;

 

为了兼容不同的浏览器需要加上通常三个一起写：

box-shadow:10px 10px 5px #444;

-moz-box-shadow:10px 10px 5px #444;  //为了兼容不同的浏览器
-webkit-box-shadow:10px 10px 5px #444;  //为了兼容不同的浏览器

 

box-shadow可以同时使用多次，例如个边框设置不同颜色的阴影，但是有顺序，先写的在顶层（z轴靠上）

设置字体阴影：

text-shadow:阴影水平偏移 阴影垂直偏移 阴影模糊值 阴影颜色;

 

鼠标悬停样式：

link设置未点击的样式，vistied设置点击过的样式，hover设置悬停样式，active设置点击样式

其中hover不仅对连接起作用，还对所有元素起作用。

例如：鼠标悬停时让div的背景颜色改变   div:hover{background-color:#000;}

　　鼠标悬停时让div里的算盘标签显示（更改透明度） div:hover span{opacity:1;}

鼠标悬停显示阴影

鼠标悬停设置块阴影 box-shadow

鼠标悬停缩放样式

transform标签允许我们对元素进行旋转、缩放、移动和倾斜

为了兼容同样一起写：transform:rotate(7deg); 7角度2D旋转

　　　　　　　　　　-ms-transform:rotate(7deg);    /* IE 9 */  

　　　　　　　　　　-moz-transform:rotate(7deg); 

　　　　　　　　　　-webkit-transform:rotate(7deg); 

　　　　　　　　　　-o-transform:rotate(7deg); 

鼠标悬停改变transform属性实现缩放效果div:hover{transform:scale(x,y)}

 

svg基础css属性 

stroke-dasharray：设置使用虚线来对图形进行描边

stroke-dashoffset：设置图形描边虚线的偏移值

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506152043.html

 

鼠标悬停的过渡效果  

transition:property duration timing-function delay;

transition-property:规定设置过渡效果的 CSS 属性的名称。

　　例如：transition-property：width；  

　　　　　transition-duration:2s;始终设置这个属性，不然没效果

　　　　  div:hover{width:100px;}和他的属性对应产生效果

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-timing-function:规定速度效果的速度曲线

　　http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp

transition-delay:定义过渡效果何时开始。

 

未完待续。。。