用户界面样式：通常是帮助用户进行界面交互的css样式
outline：表示元素轮廓，属性为分宽度、类型和颜色，语法同border
outline是为了当元素为聚焦状态时标记聚焦的元素，现代浏览器当普通链接或者按钮点击的时候，已经不会出现 outline 效果了，所以不建议设置取消outline效果
实际开发中需要让普通元素有类似控件元素的 outline 效果，可以使用<label>元素，通过 for 属性和这些原生的表单控件相关联
:focus + label.btn { outline: 1px dotted Highlight; outline: 5px auto -webkit-focus-ring-color; }
outline 是不占据任何空间的属性，我们可以根据这个属性实现头像剪裁的矩形镂空效果或者自动填满屏幕剩余空间
头像剪裁的矩形镂空效果
.crop { overflow: hidden; }
.crop > .crop-area { width: 80px; height: 80px; outline: 256px solid rgba(0,0,0,.5); cursor: move; }
自动填满屏幕剩余空间
.footer { height: 50px; }
.footer > p { position: absolute; left: 0; right: 0; text-align: center; padding: 15px 0; background-color:#a0b3d6; outline: 9999px solid #a0b3d6; clip: rect(0 9999px 9999px 0); }
cursor：光标的属性，按照功能特性对其进行的分类
1.常规：cursor:auto，default，none
2.链接和状态: pointer, help,progress,wait,context-menu
3.选择：text、vertical-text、crosshair、cell
4.拖拽：move、copy、alias， no-drop，not-allowed
5.滚动：all-scroll
6.拉伸：col-resize、row-resize
7.缩放: zoom-in、zoom-out
8.抓取：grab、grabbing
无须担心兼容性问题的 cursor 属性值有 auto、crosshair、default、move、text、wait、help、n-resize、e-resize、s-resize、w-resize、ne-resize、nw-resize、se-resize、sw-resize、pointer、progress 、 not-allowed 、 no-drop 、 vertical-text 、 all-scroll 、col-resize 和 row-resize。