在浏览器里,当鼠标点击或使用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. tomcat7 日志设置为log4j

    tomcat的日志设置用log4j的官方文档:http://tomcat.apache.org/tomcat-7.0-doc/logging.html 1. 下载tomcat-juli.jar, to ...

  2. 构建ceph deb 安装包

    前言:本文基于ubuntu 14.04.5 LTS 和ceph v0.94.3 之上做的实验 一.编译ceph包1.1.克隆ceph代码,切换分支 git clone --recursive http ...

  3. MATLAB地图工具箱学习总结(一)从地图投影说起

    MATLAB地图工具箱学习总结(一)从地图投影说起 前言 本学期地图投影课上,李连营老师建议我们使用MATLAB完成每周的作业.从大二上学期开始接触MATLAB学习数学运算和地理数据处理的我,自然不会 ...

  4. CentOS 6.6安装配置LAMP服务器(Apache+PHP5+MySQL)

    准备篇: CentOS 6.6系统安装配置图解教程 http://www.osyunwei.com/archives/8398.html 1.配置防火墙,开启80端口.3306端口 vi /etc/s ...

  5. 【leetcode❤python】 303. Range Sum Query - Immutable

    #-*- coding: UTF-8 -*- #Tags:dynamic programming,sumRange(i,j)=sum(j)-sum(i-1)class NumArray(object) ...

  6. javascript对象创建方式

    工厂模式 在ECMAscript中无法创建类,所以开发人员就发明了一种函数,用函数来封装,以特定接口创建对象的细节,如下面的例子所示: function createPerson(name,age,j ...

  7. Javascript学习笔记:闭包题解(2)

    代码: var name='The Window'; var object={ name:'My Object', getNameFunc:function(){ return function(){ ...

  8. Java的数据类型

    在JAVA中一共有八种基本数据类型,他们分别是byte.short.int.long.float.double.char.boolean整型其中byte.short.int.long都是表示整数的,只 ...

  9. TFS二次开发系列:二、TFS的安装

    本系列的实例将采用TFS 2012+Sql Server2012编写. TFS的完整版本安装最好是在Windows server2008 64位以上版本中,其包括64位的SQL SERVER 2012 ...

  10. hiho #1329 : 平衡树·Splay

    #1329 : 平衡树·Splay 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho:小Hi,上一次你跟我讲了Treap,我也实现了.但是我遇到了一个关键的问题. ...