###前言
上篇文章主要讲述了CSS样式更改中的多列、元素是否可见、图片透明度基础知识,这篇文章我们来介绍下CSS样式更改中用户界面和指针类型基础用法。
####1.用户界面 UserGui
1).重设元素大小 resize
div { resize:both } none 不调整 both 调整元素的高度和宽度 horizontal 调整元素的宽度 vertical 调整元素的高度
2).规定两个并排的带边框的框 box-sizing
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ } content-box 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
3).对轮廓进行偏移outline-offset
div { outline-offset:15px 轮廓与边框边缘的距离 }
####2.指针类型Cursor
div{ cursor:auto } 光标形状: default 默认光标(箭头) auto 浏览器设置的光标。 crosshair 十字线 pointer 一只手 move 指示某对象可被移动。 e-resize 指示矩形框的边缘可被向右(东)移动 ne-resize 指示矩形框的边缘可被向上及向右移动(北/东) nw-resize 指示矩形框的边缘可被向上及向左移动(北/西) n-resize 指示矩形框的边缘可被向上(北)移动 se-resize 指示矩形框的边缘可被向下及向右移动(南/东) sw-resize 指示矩形框的边缘可被向下及向左移动(南/西) s-resize 指示矩形框的边缘可被向下移动(南) w-resize 指示矩形框的边缘可被向左移动(西) text 指示文本 wait 指示程序正忙(通常是一只表或沙漏) help 指示可用的帮助(通常是一个问号或一个气球)
参考文档:W3C官方文档(CSS篇)
###总结
这篇文章主要介绍了CSS样式更改篇中的用户界面和指针类型基础知识,希望让大家对CSS样式更改有个简单的认识和了解。