CSS进阶（二十三）用户界面样式

outline

用法同border一样

是浏览器默认的 outline 高亮标记，与 focus 状态以及键盘访问关系密切

需要清空输入框元素的outline时，可以使用

.input {
 outline: 0; /* outline:none 亦可 */
} 

但是，必须把 focus 态样式加上

.input:focus {
 border-color: Highlight;
} 

应用

（1）头像裁剪镂空效果

（2）自动填满屏幕剩余空间的应用技巧

cursor

cursor:none 看视频时的鼠标隐藏效果

是 IE8 浏览器并不支持 cursor:none 声明，IE9支持，可以使用如下兼容性代码，：root ie9以上才认识

.cur-none {
 cursor: url(transparent.cur), auto;
}
:root .cur-none {
 cursor: none;
} 

cursor

cursor:help 提升部分细节性的体验

cursor:progress 页面加载时的体验

在设置文本不能被选中时，也需要同时设置cursor属性

cursor:move 可拖拽

禁用按钮光标还是使用 cursor: default 更合适

自定义光标

.cur-none {
 cursor: url(transparent.cur);
} 

对于 Chrome 等浏览器，可以直接使用 PNG 图片作为光标，但是 IE 浏览器不行。IE 仅支 持专门的.cur 格式的光标文件

转载于:https://www.cnblogs.com/goOtter/p/9825389.html