HTML8 工作总结

@(学习笔记)[HTML&CSS, Javascript]

1. 文本阴影和盒子阴影

其实text-shadow和box-shadow差别不大，其中重点要区别的是内嵌阴影和外阴影，以及掌握参数的含义就好了。这里重点说下内嵌阴影，它的格式如下：

box-shadow: inset npx mpx kpx color

其中n,m分别是阴影在水平方向和竖直方向的偏移，k是表示模糊程度，color自然干是阴影的颜色，特别指出透明阴影用rgba(a,b,c,d)，a,b,c是三原色不多说，d是透明度取0-1小数值，越小越透明。其实可以这样理解，所谓阴影就是用光去照那些线而产生的阴影，外阴影就是在外部产生的阴影，内阴影就是在内部产生的阴影。比如下图：


这个白色的外框对应的CSS Style就是：

box-shadow:inset 0 -3px rgba(0,0,0,0.5), 0 3px 3px rgba(0,0,0,0.5), inset 0 1px white, 0 1px black;

注意每个阴影属性内部是没有逗号的没有逗号的没有逗号的！属性之间是有逗号的，不是分号！

2.将两个兄弟元素重叠

多种实现方法：
（1）元素设成相对定位，移动自己的位置
（2）设成绝对定位，移动自己的位置
......

3.过渡的用法

比如现在你已经创建了一个类似于按钮的东西，怎样能达到当你鼠标放到按钮上按钮的颜色发生一个渐变的颜色变化呢？这就要用到过渡了。举个例子：

过渡是要在某个元素发生变化的时候使用的，而且要在该属性里面定义，比如上例中因为有一个div:hover动作会改变div，所以在div中定义过渡。过渡的相关属性如下图以及上图中的transition-timing-function：


4.用hover实现两级菜单

这个只用知道思路就好了，一级菜单当然要并列显示（看要求），并列显示的话把元素设成inline-block或者float就好，二级菜单默认隐藏，当鼠标放到一级菜单项上的时候才显示二级菜单。值得一提的是，为了让二级菜单可以在其他元素上面显示应该将它的position属性设成absolute，因为这样可以让它脱离正常的文档流。

5.用CSS实现幻灯片动画

知道思路就好做了：用一个只能装下一个图片的块包含一个能并排装下所有图片的块，子块设成相对定位方便在父块中移动（动画效果）。这里面有个要注意的点就是，并排显示图片时如果是用inline-block，还要设vertical-align:top，要不然会参差不齐，而且img之间不要有回车或者空格，否则图片之间就会有缝隙。

6.旋转透视动画

知识点：
(1)透视效果的两个属性perspective、perspective-orgin要设在需要透视的元素的父元素里面，为什么？看下定义：

(2)旋转要设在设有perspective元素的子元素上。

7.文章的多列显示

元素 {    -moz-column-count: 3; //将元素分成多少列    -moz-column-gap: 2em; //列之间间隔多少    -moz-column-rule: 0.3em double silver; //间隔线设置    -webkit-column-count: 3; //safari,chrome    -webkit-column-gap: 2em;     -webkit-column-rule: 0.3em double silver;     column-count: 3;    column-gap: 2em;    column-width: 10em; //列的宽度,列数不确定时可以只设这个，让它自己分    height: 10em; //高度    }