CSS outline属性以及和border属性的区别

来源：互联网发布：sed linux 编辑：程序博客网时间：2024/05/21 09:27

CSS outline 属性

定义和用法

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

outline-color
outline-style
outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

可能的值

值描述outline-color规定边框的颜色。参阅：outline-color 中可能的值。outline-style规定边框的样式。参阅：outline-style 中可能的值。outline-width规定边框的宽度。参阅：outline-width 中可能的值。inherit规定应该从父元素继承 outline 属性的设置。

实例

设置 4 个边框的样式：

p {border:red solid thin; outline:#00ff00 dotted thick;}</style></head><body><p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本）才支持 outline 属性。</p>

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

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

outline 与 border 的区别

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

另外outline 不会象border那样影响元素的尺寸或者位置，outline不占据空间。

转自w3school,http://my.oschina.net/guomingliang/blog/337169

0 0