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

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

CSS 的 outline 属性允许我们改变这个默认的轮廓虚线框效果。其配套的相关属性包括:
outline, outline-width, outline-style, outline-color, outline-offset
如果想让链接获取到焦点时更醒目,可以设置轮廓线条为红色,outline 属性的设计可能如:
a { outline-color: red; }

而如果想去掉影响美观的Tab上的轮廓线条,outline属性可如下设置:
.active-tab { outline: none; ...... /* other properties */}

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

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

去除焦点虚线:style="outline:medium none;" hidefocus="true"

outline使用方法,outline与border的区别:的更多相关文章

  1. outline与border的区别

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

  2. outline:0与outline:none区别

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

  3. 【转】Oracle Outline使用方法及注意事项

    概要  Oracle Outline是用来保持SQL运行计划(execution plan)的一个工具. 我们能够通过outline工具防止SQL运行计划在数据库环境变更(如统计信息,部分參数等)而引 ...

  4. java基础疑难点总结之成员变量的继承,方法重载与重写的区别,多态与动态绑定

    1.成员变量的继承 1.1要点 子类用extends关键字继承父类.子类中可以提供新的方法覆盖父类中的方法.子类中的方法不能直接访问父类中的私有域,子类可以用super关键字调用父类中的方法.在子类中 ...

  5. String split方法与Guava Splitter用法区别

    String split方法与Guava Splitter用法区别 今天同事写了一段使用String split方法的代码,如下所示,同事期望得到的是字符"1",但是没想到却得到空 ...

  6. delphi dispose释放内存的方法 New 和 GetMem 的区别

    来自:http://blog.sina.com.cn/s/blog_4bc47d2301018trf.html -------------------------------------------- ...

  7. 类属性与对象实现,init方法的作用,绑定方法,绑定方法与普通函数的区别,继承,抽象与继承,派生与覆盖

    今日内容: 1.类属性与对象属性 2.init方法的作用 3.绑定方法 4.绑定方法与普通函数的区别(非绑定方法) 5.继承 6.抽象与继承 7.派生与覆盖 1.类属性与对象属性 类中应该进存储所有对 ...

  8. 数组遍历方法forEach 和 map 的区别

    数组遍历方法forEach 和 map 的区别:https://www.cnblogs.com/sticktong/p/7602783.html

  9. 给任意view设置圆角outline.setRoundRect()方法实现

    效果图,给banner设置圆角,1没有直接修改imageView而是使用自带方法进行设置 具体方法如下 //圆角方法 @TargetApi(Build.VERSION_CODES.LOLLIPOP) ...

随机推荐

  1. 什么是setTimeout函数和setInterval函数?

    我们一般在浏览网页的时候,一般都会有图片轮播等,一些比较好玩的特效,接下来我就给大家讲讲这俩个函数! 一setTimeout函数和setInterval函数的语法以及应用 1.setTimeout函数 ...

  2. 大数据 > 数据平台方案评估

    分类 当前措施 说明 百度竞价如何进行数据分析(SEM工程师)数据来源: 1. 百度后台推广数据:api 总展现 总点击 点击率 总消费 点击均价 BDP功能点 1. 串联百度->网站商务通-& ...

  3. FastReport使用DataSet作数据源

    1.打开FastReport的设计器, 2.选择[File]->[New] 新建FastReport模板. 3.选择[View]->[Data],显示如下,导出Dictionary,保存. ...

  4. Tomcat目录映射设置

    方法一: \conf\server.xml <Host>内插入<Context path="虚拟目录" docBase="文件目录" /> ...

  5. [OC] Podfile 格式内容

    platform :ios, '8.0' target :'targetName' do pod 'Masonry', '~> 1.0.1' pod 'SDCycleScrollView', ' ...

  6. 链表栈的C语言实现

    #ifndef _CONST_H_#define _CONST_H_ #include <stdio.h>#include <stdlib.h> typedef enum { ...

  7. Query Designer:Exception,不同的值显示不同的颜色

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. hdu 5506 GT and set dfs+bitset优化

    GT and set Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Probl ...

  9. VIM小技巧

    1.复制多行 vi编辑器中的整行(多行)复制与粘贴就非常必要了. 1.复制 1)单行复制 在命令模式下,将光标移动到将要复制的行处,按"yy"进行复制: 2)多行复制 在命令模式下 ...

  10. Spring aop 记录操作日志 Aspect

    前几天做系统日志记录的功能,一个操作调一次记录方法,每次还得去收集参数等等,太尼玛烦了.在程序员的世界里,当你的一个功能重复出现多次,就应该想想肯定有更简单的实现方法.于是果断搜索各种资料,终于搞定了 ...