第11章 用户界面样式

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. 常规

2. 链接和状态

3. 选择

4. 拖曳

5. 滚动

6. 拉伸

1. 单向拉伸

2.双向拉伸

7. 缩放

8. 抓取

自定义光标

解决兼容性问题。