使用css3 outline属性设计元素轮廓

1、使用css3 outline属性设计元素轮廓有些时候，我们可能希翼在可视对象。如按钮、活动窗体域、图形地图等，周围添加一圈外部轮廓线，使对象突出显示。固然这里的外轮廓线与元素边框是不同的，外轮廓线不占用网页布局空间，且不一定是矩形，外轮廓线属于动态样式，惟独当对象猎取焦点或者被激活时展现。 css3定义轮廓线 outline属性可以定义块元素的外轮廓线。 在元素周围绘制一条轮廓线，可以起到突出元素的作用。例如，可以在原本没有边框的radio单选框外围加上一条轮廓线，使其在页面上显得越发突出，也可以在一组radio单选框中只对某个单选框加上轮廓线，使其区分于别的单选框。 outline属性初始值

2、按照详细的元素而定，它适用于全部元素。取值容易解释如下。 ：定义轮廓边框色彩。 ：定义轮廓边框轮廓。 ：定义轮廓边框宽度。 ：定义轮廓边框偏移位置的数值。 inherit:默认继承。 外轮廓线可能是非矩形的。例如，假如元素被分割在好几行，那么外轮廓线就起码是能要包含该元素全部框的外廓。和边框不同的是，外廓在线框的起讫端都不是开放的，它总是彻低闭合的。 css3在outline属性基础上派生了4个外轮廓线属性，容易解释如下。 outline-color：定义轮廓边框色彩。outline-color属性接受全部的色彩，还包括关键字invert。invert应当在屏幕上对像素点色彩举行一次反转。这个

3、技巧保证焦点框可见，而不管背景颜 色是什么。 outline-style：定义轮廓边框轮廓。outline-style属性与border-style属性接受值和使用相同， 如none、dotted、dashed、solid、double、groove、ridge、inset和outset。但是，hidden属性 值并不是一个合法的外轮廓样式。 outline-width：定义轮廓边框宽度。outline-width属性与border-width属性接受值和使用相同。 outline-offset：定义轮廓边框偏移位置的数值。 outline属性是个复合属性，可以设置outline-style、

4、outline-width和outline-color属性值。注重，外轮廓线在各边都是一样的，这与边框不同，没有outline-top或outline-left属性。css不支持定义多 个相互笼罩的外轮廓线，也没有定义如何定义因在其他元素之后而有部分不行见的框的外轮廓线。 焦点是文档中用户交互的主题（如输入文本、挑选一个按钮等），图形化的用户界面可以用法元素周围的外轮廓线来告知用户页面上哪个元素获得了焦点。这些外轮廓线是不同于任何边框样式的，切换外轮廓线的显示和不显示都不会使文档流发生变幻。扫瞄器假如支持交互媒介组，则必需跟踪焦点位置，而且必需显示焦点。这个可以通过动态外轮廓线和：focus伪

5、类的联合用法完成。 看下面的示例，在一个元素获得焦点时在周围画一个粗实线外轮廓线，而在它活动时也画一个不同色的 粗实线外轮廓线，从而提高用户交互效果， css3定义轮廓线宽度： outline-width属性可以单独设置外轮廓线的宽度。 outline-width属性初始值为medium，适用于全部元素。取值容易解释如下。 thin:定义细轮廓。 medium:定义中等轮廓。 thick:定义粗轮廓。 ：定义轮廓粗细的值。 inherit:默认继承。 css3定义轮廓线样式 outline-style属性可以设置外轮廓线的样式。 outline-style属性初始值为none，适用于全部元素。

6、取值容易解释如下。 auto:按照扫瞄器自动设置。 ：沿用边框样式。包括none、dotted、dashed、solid、double、groove、mset和outset。 inherit:默认继承。 该属性的扫瞄器兼容性与outline-width属性相同。 css3定义轮廓线色彩 outline- color属性可以单独设置外轮廓线的色彩。 outline-color属性初始值为invert，适用于全部元素。取值容易解释如下。 :可以是色彩名，如red；函数值，如rgb(255，0，0);或者十六进制值，如ff0000。 invert：执行色彩反转（逆向的色彩）。这样可以碗保外轮廓线在不同的背景色彩中都是可见的。 inherit:默认继承。 css3定义轮廓线位移 outline-offset属性可以单独设置外轮廓线的偏移位置。 outline-offset属性初始值为0，适用于全部元素。取值容易解释如下。 ：定义轮廓距离容