CSS那些你可能不知道的事情

@huruji 2018-04-15 18:11:01发表于 huruji/blog 连载中ing

user-select

是否允许用户选中文字,这在 防止用户copy内容 的时候非常有用,值有以下:

  • none : 不允许用户选中文字
  • text:允许用户选中文字,默认
  • all:一并选中,当双击子元素或者上下文时,那么包含该子元素的最顶层元素也会被选

自定义scrollbar

webkit浏览器很早开始就支持自定义滚动条,利用提供的伪元素即可实现,scrollbar提供的部分有

  • ::-webkit-scrollbar { /* 1 */ } // 滚动条整体部分

  • ::-webkit-scrollbar-button { /* 2 */ } // 滚动条两端的按钮

  • ::-webkit-scrollbar-track { /* 3 */ } // 滚动条的轨道

  • ::-webkit-scrollbar-track-piece { /* 4 */ } / 轨道除去小方块的部分

  • ::-webkit-scrollbar-thumb { /* 5 */ } // 滚动条里的小方块

  • ::-webkit-scrollbar-corner { /* 6 */ } // 横竖滚动条的交汇处

  • ::-webkit-resizer { /* 7 */ } // 拖动调整元素大小的小控件

在浏览器中分别对应的部分是:

同时为这些元素提供了很多不同状态的伪类选择器,具体内容可看custom-scrollbars-in-webkitscrollbar