CSS的隐藏、盒子阴影轮廓、光标样式

一、css中的隐藏元素：

opacity：0           隐藏该元素，不会改变页面布局，已绑定事件可以正常触发
visibility:hidden    隐藏该元素，不会改变页面布局，也不会触发已绑定的事件
display:none         隐藏该元素，会改变页面布局，可以理解成在页面中把该元素删掉
z-index=-1           置于其他元素下面

二.盒子阴影轮廓：

盒子的阴影

box-shadow属性，该属性有很多值：

hoffset：阴影的水平偏移量，是一个长度值，正值表示阴影向右偏移，负值表示阴影向左偏移。
voffset：阴影的垂直偏移量，是一个长度值， 正值代表阴影位于元素盒子的下方，负值代表阴影位于元素盒子上方。

以下为可选值：
blur ：指定模糊值，是一个长度值，值越大盒子的边界越模糊。默认值为 0，边界清晰
spread：指定阴影延伸半径，是一个长度值， 正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小
color ：设置阴影的颜色，如果省略，浏览器会自行选择一个颜色
inset：(可选)将外部阴影设置为内部阴影

盒子的轮廓

和边框一样，只不过它可以在边框的外围再加一层。属性表如下：

outline-color：颜色值，外围轮廓的颜色
outline-offset：长度值，轮廓距离元素边框边缘的偏移量
outline-style：轮廓样式，和border-style用法一致
ontline-witdh：长度值，轮廓宽度
outline：轮廓样式的简写，"颜色 样式 宽度"

三、光标样式：通过属性cursor实现，该属性的值很多：

autodefaultnonecontext-menuhelp

pointerprogresswaitcellcrosshair

textvertical-textaliascopymove

no-dropnot-allowede-resizen-resizene-resize

nw-resizes-resizese-resizesw-resizew-resize

ew-resizens-resizenesw-resizenwse-resizecol-resize

row-resizeall-scrollgrabgrabbingzoom-in

zoom-out