在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。

outline 能告诉用户那一个可以激发事件的html元素获取了焦点,对钟爱键盘操作的用户尤其有意义。一个清晰悦目的outline设计能提高使用表单的用户体验。 另一方面,outline 也有些讨厌的地方,比如使用CSS设计的Tab(标签页)时,选择一个Tab之后,Tab上的轮廓虚线会一直显示,有些影响美观。

CSS 的 outline 属性允许我们改变这个默认的轮廓虚线框效果。其配套的相关属性包括:

outline

outline-width

outline-style

outline-color

outline-offset

其中第一个 outline 是速写(shorthand)形式,格式为: outline: outline-color || outline-style || outline-width

如果想让链接获取到焦点时更醒目,可以设置轮廓线条为红色,outline 属性的设计可能如下:

a { outline-color: red; }

而如果想去掉影响美观的Tab上的轮廓线条,outline属性可如下设置:

.active-tab , img , a { outline: none;}

outline in browsers

直到最新的IE7 beta2,MS的IE还不支持 outline CSS属性,不过IE为HTML元素扩展了一个 hideFoucs 属性,所有能获得焦点的元素如果添加 hideFoucs="true" 属性,那么它们获得焦点时虚线框将被不出现。比如MSDN里的例子:

<button>button with rectangle</button>

<!-- 其实hideFocus="false"同hideFocus="true"一样的效果,IE只要发现存在hideFocus属性即生效,这样写是为了兼 容XHTML的属性必须有值的规范 -->

<button hideFocus="true">tton without rectangle</button>

Firefox1.5提供了全面的outline支持。早期的Firefox 1.0.x 版本据说可以使用Mozilla的独有扩展 -moz-outline,不过我想现在几乎找不到什么不升级到Firefox 1.5的理由了。 另外Opera9 beta似乎还不支持。

更多浏览器支持信息可以从QuirksMode 找到。

outline 与 border 的区别

border 可应用于几乎所有有形的html元素,而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出,那就是: outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需JavaScript配合CSS来控制。

另外从 CSS的十八般技巧 一文中还读到的一个区别就是: outline 不会象border那样影响元素的尺寸或者位置。

去除焦点虚线:

style="outline:medium none;" hidefocus="true"

outline与border的区别的更多相关文章

  1. outline使用方法,outline与border的区别:

    在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...

  2. 小聊outline和border

    border与outline: border属性: border-width.border-style.border-color 其中border-style可以为none或hidden outlin ...

  3. outline的兼容性及使用限制

    outline 和 border的区别: outline不占据文档空间,border占据文档空间. outline无法单独设置上下左右,只要设置outline,必须所有的边都设置:border可以设置 ...

  4. 【面试问题】—— 2019.3月前端面试之JS原理&CSS基础&Vue框架

    前言:三月中旬面试了两家公司,一家小型公司只有面试,另一家稍大型公司笔试之后一面定夺.笔试部分属于基础类型,网上的复习资料都有. 面试时两位面试官都有考到一些实际工作中会用到,但我还没接触过的知识点. ...

  5. Web前端:2、盒模型的组成

    在HTML中,若想要实心划分区域,则:1.添加标签:2.对标签设置尺寸(宽高) 但只要是添加了一个元素(标签),就会在页面中生成一个盒子,不同元素产生的盒子模型可能不同,这取决于它CSS的displa ...

  6. 【Web前端HTML5&CSS3】08-盒模型补充

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 盒模型补充及田径场实战 1. 盒子大小 2. 轮廓 3. 阴影 4. 圆角 圆 椭圆 盒模型补充及田径场实战 1 ...

  7. border和outline的区别

    如果有一个需求,给一个元素增加一条边框,想必大家会习惯且娴熟的使用border来实现,我也是这样   但其实outline也能达到同样的效果,并且在有些场景下会更适用,比如下面的demo 使用bord ...

  8. outline:0与outline:none区别

    outline:0与outline:none的效果完全一样,用哪个都行,为了少写几个字,提倡用outline:0.具体区别如下: 出处: https://stackoverflow.com/quest ...

  9. 利用CSS3实现圆角的outline效果的教程

    一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...

随机推荐

  1. 做完小程序项目、老板给我加了5k薪资~

    大家好,我是苏南,今天要给大家分享的是最近公司做的一个小程序项目,过程中的一些好的总结和遇到的坑,希望能给其他攻城狮带来些许便利,更希望能做完之后老板给你加薪- 今天是中秋节的第一天,假日的清晨莫名的 ...

  2. M2团队贡献分分配

    经过考虑,M2阶段团队贡献分分配如下: 团队成员 贡献分 12061166 宋天舒 56 12061157 黄漠源 52 12061159 张迎春 55 12061175 刘翔宇 54 1206117 ...

  3. hover设定触发时间间隔

    500毫秒执行一次 $(".banner_menu_content li a").hover(function(){ var aa=$(this).text().trim(); s ...

  4. window.setTimeout

    https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout

  5. UBB编辑器

    http://ckeditor.com/ 这是老大哥 http://kindeditor.org/ 这是新秀 http://htmleditor.in/firefox-html-editor.html ...

  6. [读书笔记]SQLSERVER企业级平台管理实践读书笔记02

    记录一下 这一块 join的理解了 再完善过来. 1. Statistics的用法: 清空执行计划用的命令 dbcc freeproccache 清空buffer pool 里面的缓存命令 dbcc ...

  7. awk、sed、grep三大shell文本处理工具之awk的应用

    awk 1.是什么 是一个编程语言.支持变量.数组.函数.流程控制(if...else/for/while) 单行程序语言. 2.工作流程 读取file.标准输入.管道给的数据,从第一行开始读取,逐行 ...

  8. TMainMenu - 隐藏与显示菜单

    //隐藏与显示菜单 Self.Menu := nil; {隐藏菜单} Self.Menu := MainMenu1; {显示菜单}

  9. python之小应用:读取csv文件并处理01数据串

    目的:读取csv文件内容,把0和1的数据串取出来,统计出现1的连续次数和各次数出现的频率次数 先读取csv文件内容: import csv def csv_read(file): list = [] ...

  10. mysql DDL&DML 语言

    DDL:数据定义语言 CREATE, ALTER, DROP CREATE相关的常用命令: CREATE DATABASECREATE EVENTCREATE FUNCTIONCREATE FUNCT ...