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 格式的光标文件

posted @ 2018-10-21 17:17  CodingSherlock  阅读(166)  评论(0编辑  收藏  举报