outline使用方法,outline与border的区别

在浏览器里,当鼠标点击或使用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 { outline: none; ...... /* other properties */}

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"

时间: 2024-10-25 22:32:07

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

outline与border的区别

在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的html元素获取了焦点,对钟爱键盘操作的用户尤其有意义.一个清晰悦目的outline设计能提高使用表单的用户体验. 另一方面,outline 也有些讨厌的地方,比如使用CSS设计的Tab(标签页)时,选择一个Tab之后,Tab上的轮廓虚线会一直显示,有些影响美观. CSS 的 outline 属性允许

table border 和css border的区别

<table width="98px" height="50px" style=" border:solid 1px blue;" > <tr> <td colspan="2">1</td> </tr> <tr> <td>1</td> <td style="font-weight: 700">2<

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

1.成员变量的继承 1.1要点 子类用extends关键字继承父类.子类中可以提供新的方法覆盖父类中的方法.子类中的方法不能直接访问父类中的私有域,子类可以用super关键字调用父类中的方法.在子类中可以增加域,增加方法或者覆盖超类的方法,然而绝对不能删除继承的任何域和方法. 在一个子类被创建的时候,首先会在内存中创建一个父类对象,然后在父类对象外部放上子类独有的属性,两者合起来形成一个子类的对象.所以所谓的继承使子类拥有父类所有的属性和方法其实可以这样理解,子类对象确实拥有父类对象中所有的属性

Python字典方法copy()和deepcopy()的区别

1 from copy import deepcopy # import deepcopy模块 2 d = {} 3 d['name'] = ['black', 'guts'] # d = {'name': ['black', 'guts']} 4 c = d.copy() # c = {'name': ['black', 'guts']} 5 dc = deepcopy(d) # dc = {'name': ['black', 'guts']} 6 d['name'].append('whit

jsp中遇到Integer的方法valueOf()和parseInt()的区别.前者要求是对象类型,后者是数字型字符串

他们有本质区别,Integer.valueof(String s)是将一个包装类是将一个实际值为数字的变量先转成string型再将它转成Integer型的包装类对象(相当于转成了int的对象)这样转完的对象就具有方法和属性了. 而Integer.parseInt(String s)只是将是数字的字符串转成数字,注意他返回的是int型变量不具备方法和属性 Integer.parseInt()把String 型转换为Int型, Integer.valueOf()把String 型转换为Integer

Class.isAssignableFrom(Class clz)方法 与 instanceof 关键字的区别

Class.isAssignableFrom(Class clz)方法 与 instanceof 关键字的区别 博客分类: Java .netHTML 原地址:http://topic.csdn.net/t/20050127/15/3758173.html 我略作了下修改 Class.isAssignableFrom()是用来判断一个类Class1和另一个类Class2是否相同或是另一个类的子类或接口.   格式为:        Class1.isAssignableFrom(Class2)

spring的InitializingBean的 afterPropertiesSet 方法 和 init-method配置的 区别联系

InitializingBean Spirng的InitializingBean为bean提供了定义初始化方法的方式.InitializingBean是一个接口,它仅仅包含一个方法:afterPropertiesSet(). Bean实现这个接口,在afterPropertiesSet()中编写初始化代码: package research.spring.beanfactory.ch4; import org.springframework.beans.factory.InitializingB

简单工厂、工厂方法和抽象工厂的区别

工厂模式一般分为简单工厂.工厂方法和抽象工厂三种,看了很多资料,好多讲的都是云里雾里的.要么是概念太多,让人看得一脸懵逼,要么是举得例子不太恰当,看了更让人迷惑了.经过自己一番研究,通过一个简单的例子,终于搞明白了它们之间的区别. 下面以生产宝马.奔驰汽车的工厂为例,讲解它们之间的区别. 一.简单工厂模式 创建一个工厂类,根据传入的参数来决定创建哪个汽车类 //汽车接口 public interface Car { void getCar(); } //宝马汽车类 public class BM

方法的重载与重写区别

重写和重载的区别 (1) 方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型. 重载Overloading是一个类中多态性的一种表现. (2) Java的方法重载,就是在类中可以创建多个方法,它们具有相同的名字,但具有不同的参数和不同的定义. 调用方法时通过传递给它们的不同参数个数和参数类型来决定具体使用哪个方法, 这就是多态性. (3) 重载的时候,方法名要一样,但是参数类型和个数不一样,返回值类型可以相同也可以不相同.无法以返回型别作为重载函