outline属性（outlineoffset属性）

怎么用css的outline属性?我按照它的参数设置看不到一点效果

outline : outline-color || outline-style || outline-width

img { outline: red }

p { outline: double 5px }

button { outline: #E9E9E9 double thin }

css outline是什么意思

定义和用法

outline-style 属性用于设置元素的整个轮廓的样式.样式不能是 none,否则轮廓不会出现.

outline （轮廓）是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.outline 属性设置元素周围的轮廓线.

注释：请始终在 outline-color 属性之前声明 outline-style 属性.元素只有获得轮廓以后才能改变其轮廓的颜色.

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

默认值：none

设置轮廓的样式：

p

{

outline-style:dotted;

}

浏览器支持

所有主流浏览器都支持 outline-style 属性.

只有在规定了 !DOCTYPE 时,Internet Explorer 才支持 outline-style 属性.

可能的值

值 描述

none 默认.定义无轮廓.

dotted 定义点状的轮廓.

dashed 定义虚线轮廓.

solid 定义实线轮廓.

double 定义双线轮廓.双线的宽度等同于 outline-width 的值.

groove 定义 3D 凹槽轮廓.此效果取决于 outline-color 值.

ridge 定义 3D 凸槽轮廓.此效果取决于 outline-color 值.

inset 定义 3D 凹边轮廓.此效果取决于 outline-color 值.

outset 定义 3D 凸边轮廓.此效果取决于 outline-color 值.

inherit 规定应该从父元素继承轮廓样式的设置.

CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”

box-shadow：给元素块添加周边阴影效果。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

*还有另一种情况： box-shadow: 0 2px 2px #FECC84

当我们在色值前只写了三个数值的情况下，则第三个值是 blur （模糊距离）。

利用阴影属性，也可以实现外边框的效果：

当我们再为它添加一个 outline （轮廓），就会发现它实现了-边框内圆角：

* 关于为什么会这样：

outline的描边并不会跟着圆角走，因此显示为直角。

所以把这两者叠加到一起，box-shadow 则刚好填补描边与容器圆角之间的空隙。

*值得注意的是，box-shadow 阴影的大小值并不一定等于描边的宽度，它和圆角的大小有关系。所以只需要一个足够填补空隙的大小就可以了。事实上，制定一个等于描边宽度的值在某些浏览器中可能会渲染异常，所以，最好是稍小的值。

参考书籍： Lea Verou 《CSS揭秘》

网页的表单的文本框获得焦点后外面有一个蓝色的边框，我没有设置呀，这是怎么回事。

这是浏览器的默认行为，当输入框聚焦时，outline属性的样式效果就出来了，360浏览器默认的outline属性样式为蓝色，所以出现的是蓝色的边框。想要去掉蓝色边框的话，可以设置outline：none或者outline：0都可以。

none !important是什么意思？

none !important表示使outline属性无效，使绘制于元素周围的一条线无效。

outline属性包括：outline-color、outline-style、outline-width：

outline-color ：设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。

outline-style ：设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。

扩展资料：

outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none，否则轮廓不会出现。

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

注释：请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。注释：轮廓线不会占据空间，也不一定是矩形。默认值： none

怎样做好看的outline 笔记

在浏览器里，当鼠标点击或使用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里的例子:

buttonbutton 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"