美文网首页
关于div的outline-offset属性和focus事件的接

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

作者: 华山令狐冲 | 来源:发表于2021-02-17 10:33 被阅读0次

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事件了:

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


相关文章

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

    outline-offset属性设置轮廓框架在 border 边缘外的偏移. Outlines在两个方面不同于边框...

  • div等元素通过增加tabIndex属性使其支持:focus

    由于div等元素无法接受键盘或其他用户事件,即不支持:focus伪类,可通过增加tabIndex属性使其支持:focus

  • div focus blur事件

    开发过程中经常会遇到上图中的需求。点击div显示删除按钮,当点击其他地方时删除按钮隐藏。基本上都能想到利用focu...

  • Js中onfocus和focus的区别

    focus() 是方法,onfocus 是事件属性。 focus()是去触发使其获得焦点,onfocus表示获得焦...

  • JavaScript3.0

    添加事件 1、添加事件添加事件方式,见代码显示隐藏图片操作div的display属性,在block和none之间切...

  • day7_JavaScript(2)

    1、添加事件添加事件方式 显示隐藏图片操作div的display属性,在block和none之间切换即可 this...

  • JavaScript3

    1、添加事件 (1)添加事件方式 效果如下: (2)显示隐藏图片操作div的display属性,在block和no...

  • 2018-08-21 day07 js事件

    添加事件添加事件方式,见代码显示隐藏图片操作div的display属性,在block和none之间切换即可this...

  • day27-js基础三

    1、添加事件 添加事件方式 显示隐藏图片操作div的display属性,在block和none之间切换即可 thi...

  • day7-知识

    1、添加事件 添加事件方式,见代码 显示隐藏图片操作div的display属性,在block和none之间切换即可...

网友评论

      本文标题:关于div的outline-offset属性和focus事件的接

      本文链接:https://www.haomeiwen.com/subject/ynwebktx.html