border
形似的outline
属性outline
表示元素的轮廓,语法和border
属性类似,分宽度、类型、颜色,支持的关键字和属性值和border
属性一模一样。
.outline {
outline: 1px solid #ccc;
}
outline:0 none
See the Pen label模拟原生focus outline效果 by whjin (@whjin) on CodePen.
outline
及其应用1. 案例一:头像剪裁的矩形镂空效果
2. 案例二:自动填满屏幕剩余空间的应用技巧
cursor
cursor
属性值1. 常规
cursor:auto
:cursor
默认值。cursor:default
:系统默认光标形状。cursor:pointer
还原成cursor:default
cursor:none
:光标隐藏2. 链接和状态
cursor:pointer
:cursor:help
:帮助,光标头上带个问好cursor:progress
:进行中cursor:wait
:不推荐使用cursor:context-menu
:上下文菜单3. 选择
cursor:text
:文字可被选中cursor:vertical-text
:文字可以垂直居中cursor:crosshair
:十字光标cursor:cell
:单元格选框4. 拖曳
cursor:move
:元素可移动cursor:copy
:元素可复制cursor:alias
:元素可以创建别名或快捷方式cursor:no-drop
:当前元素放开到当前位置是不允许的cursor:not-allowed
:当前行为禁止5. 滚动
cursor:all-scroll
:上下左右都可以滚动6. 拉伸
cursor:col-resize
:移动垂直线条cursor:row-resize
:移动水平线条1. 单向拉伸
cursor:n-resize
:朝上的单箭头cursor:e-resize
:朝右的单箭头cursor:s-resize
:朝下的单箭头cursor:w-resize
:朝左的单箭头cursor:ne-resize
:朝右上角的单箭头cursor:nw-resize
:朝左上角的单箭头cursor:se-resize
:朝右下角的单箭头cursor:sw-resize
:朝左下角的单箭头2.双向拉伸
cursor:ew-resize
:cursor:ns-resize
:cursor:nesw-resize
:cursor:nwse-resize
:7. 缩放
cursor:zoom-in
:放大镜cursor:zoom-out
:缩小镜8. 抓取
cursor:grab
:五指张开cursor:grabing
:五指收起解决兼容性问题。