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

这篇文章主要为大家展示了“如何使用css3 outline属性设计元素轮廓”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用css3 outline属性设计元素轮廓”这篇文章吧。

css3定义轮廓线

    outline属性可以定义块元素的外轮廓线。

    在元素周围绘制一条轮廓线，可以起到突出元素的作用。例如，可以在原本没有边框的radio单选框外围加上一条轮廓线，使其在页面上显得更加突出，也可以在一组radio单选框中只对某个单选框加上轮廓线，使其区别于别的单选框。

    outline属性初始值根据具体的元素而定，它适用于所有元素。取值简单说明如下。

       <outline-color>：定义轮廓边框颜色。 

       <outline-style>：定义轮廓边框轮廓。

       <outline-width>：定义轮廓边框宽度。

       <outline-offset>：定义轮廓边框偏移位置的数值。

        inherit:默认继承。

    外轮廓线可能是非矩形的。例如，如果元素被分割在好几行，那么外轮廓线就至少是能要包含该元素所有框的外廓。和边框不同的是，外廓在线框的起讫端都不是开放的，它总是完全闭合的。

    CSS3在outline属性基础上派生了4个外轮廓线属性，简单说明如下。

      outline-color：定义轮廓边框颜色。outline-color属性接受所有的颜色，还包括关键字invert。invert应该在屏幕上对像素点颜色进行一次反转。这个技巧保证焦点框可见，而不管背景颜

    色是什么。

      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、outline-width和outline-color属性值。注意，外轮廓线在各边都是一样的，这与边框不同，没有outline-top或outline-left属性。CSS不支持定义多

个互相覆盖的外轮廓线，也没有定义如何定义因在其他元素之后而有部分不可见的框的外轮廓线。

    焦点是文档中用户交互的主题（如输入文本、选择一个按钮等），图形化的用户界面可以使用元素周围的外轮廓线来告诉用户页面上哪个元素获得了焦点。这些外轮廓线是不同于任何边框样式的，切换外轮廓线的显示和不显示都不会使文档流发生变化。浏览器如果支持交互媒介组，则必须跟踪焦点位置，而且必须显示焦点。这个可以通过动态外轮廓线和：focus伪类的联合使用完成。

    看下面的示例，在一个元素获得焦点时在周围画一个粗实线外轮廓线，而在它活动时也画一个不同色的

粗实线外轮廓线，从而提高用户交互效果，如图所示：

css3定义轮廓线宽度：

      outline-width属性可以单独设置外轮廓线的宽度。

      outline-width属性初始值为medium，适用于所有元素。取值简单说明如下。

      thin:定义细轮廓。

      medium:定义中等轮廓。

      thick:定义粗轮廓。

    <length>：定义轮廓粗细的值。

      inherit:默认继承。

css3定义轮廓线样式

outline-style属性可以设置外轮廓线的样式。

outline-style属性初始值为none，适用于所有元素。取值简单说明如下。

  auto:根据浏览器自动设置。

  <border-style>：沿用边框样式。包括none、dotted、dashed、solid、double、groove、mset和outset。

  inherit:默认继承。

该属性的浏览器兼容性与outline-width属性相同。

css3定义轮廓线颜色

    outline- color属性可以单独设置外轮廓线的颜色。

    outline-color属性初始值为invert，适用于所有元素。取值简单说明如下。

    <color>:可以是颜色名，如red；函数值，如rgb(255，0，0);或者十六进制值，如#ff0000。

      invert：执行颜色反转（逆向的颜色）。这样可以碗保外轮廓线在不同的背景颜色中都是可见的。

      inherit:默认继承。

css3定义轮廓线位移

    outline-offset属性可以单独设置外轮廓线的偏移位置。

    outline-offset属性初始值为0，适用于所有元素。取值简单说明如下。

    <length>：定义轮廓距离容器的值。

      inherit:默认继承。

    该属性的浏览器兼容性与outline-width属性相同。

以上是“如何使用css3 outline属性设计元素轮廓”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！