关于div的outline-offset属性和focus事件的接收

简介: 关于div的outline-offset属性和focus事件的接收

image.png

outline-offset属性设置轮廓框架在 border 边缘外的偏移.

Outlines在两个方面不同于边框:

  • Outlines 不占用空间
  • Outlines 可能非矩形
  • image.pngoutline-offset越大,越容易向外偏outline-offset越大,越容易向外偏移:image.pngoutline-offset越小,越容易向内偏移:image.pngimage.pngimage.png绿色的是border,红色的是offset:image.pngoffset从4px改成-4px:

image.png默认本页面里只有button可以focus,div没办法接受focus:image.pngimage.pngtab键的focus会根据属性tabindex的值从小到大进行移动,tabindex = -1则无法接收tab focus事件。

相关文章
|
11月前
|
前端开发
layui select 绑定onchange事件失效
layui select 绑定onchange事件失效问题处理
|
5月前
|
前端开发
CSS实现自动序号 counter-reset: NO。例如:01、02、03...;1、1.1、1.2、2、2.1、2.2、2.3等等
CSS实现自动序号 counter-reset: NO。例如:01、02、03...;1、1.1、1.2、2、2.1、2.2、2.3等等
layui嵌套弹出模态框的Blocked a frame with origin null from的解决方案
layui嵌套弹出模态框的Blocked a frame with origin null from的解决方案
165 0
|
8天前
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
23 0
|
12月前
21avalon - 指令ms-hover(hover绑定)
21avalon - 指令ms-hover(hover绑定)
38 0
|
5月前
|
缓存 JavaScript 前端开发
通过id给input框和div赋值,修改属性值。
通过id给input框和div赋值,修改属性值。
119 0
通过id给input框和div赋值,修改属性值。
|
11月前
el-input-number阻止外层button的冒泡
el-input-number阻止外层button的冒泡
115 0
|
前端开发
CSS pointer-events 鼠标事件(让标签无法点击)
CSS pointer-events 鼠标事件(让标签无法点击)
119 0
|
JavaScript 开发者
动画-transition-group 中 appear 和 tag 属性的作用|学习笔记
快速学习动画- transition-group 中 appear 和 tag 属性的作用
259 0
动画-transition-group 中 appear 和 tag 属性的作用|学习笔记