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

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的原创文章,尽在:“汪子熙”:

汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。2020年5月下旬,Jerry做了脑部肿瘤的开颅切除手术,对编程和人生又有了新的感悟。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页