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

113 阅读1分钟

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

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

  • Outlines 不占用空间
  • Outlines 可能非矩形

outline-offset越大,越容易向外偏移:

outline-offset越小,越容易向内偏移:

<html>
<style>
div {
	margin:20px;
	height: 70px;
	border: 1px solid green;
	outline: 1px solid red;
	outline-offset: 4px;
}
</style>

<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
</body>
</html>

绿色的是border,红色的是offset:

offset从4px改成-4px:

默认本页面里只有button可以focus,div没办法接受focus:

给div添加tabindex="1"的属性后,就可以接收focus事件了:


tab键的focus会根据属性tabindex的值从小到大进行移动,tabindex = -1则无法接收tab focus事件。

更多Jerry的原创文章,尽在:“汪子熙”: