CSS-大纲 - 芒果文档

📌 相关文章

📜 CSS-大纲

📅 最后修改于: 2020-10-26 04:48:26 🧑 作者: Mango

轮廓与边框非常相似，但是也没有什么大的不同-

轮廓线不会占用空间。
轮廓不必为矩形。
轮廓在所有方面总是相同的；您不能为元素的不同面指定不同的值。

注意-IE 6或Netscape 7不支持大纲属性。

您可以使用CSS设置以下大纲属性。

outline-width属性用于设置轮廓的宽度。
outline-style属性用于设置轮廓的线条样式。
outline-color属性用于设置轮廓的颜色。
outline属性用于在单个语句中设置以上所有三个属性。

轮廓宽度属性

outline-width属性指定要添加到框的轮廓的宽度。就像border-width属性一样，它的值应该是长度，或者是Thin，Medium或Thick之一。

零像素的宽度表示没有轮廓。

这是一个例子-


         This text is having thin outline.
      
      

      
      
         This text is having thick outline.
      
      

      
      
         This text is having 5x outline.

它将产生以下结果-

大纲样式的属性

outline-style属性指定围绕元素的线的样式（实线，点线或虚线）。它可以采用以下值之一-

无-无边框。（相当于outline-width：0;）
实线-轮廓是一条实线。
点状-轮廓是一系列点。
虚线-轮廓是一系列短线。
double-轮廓是两条实线。
凹槽-轮廓看起来像刻在页面上。
脊-轮廓看起来与凹槽相反。
插图-轮廓使框看起来像嵌入页面中。
起点-轮廓使框看起来像是从画布中出来的。
隐藏-与没有相同。

这是一个例子-


         This text is having thin solid  outline.
      
      

      
      
         This text is having thick dashed outline.
      
      

      
      
         This text is having 5x dotted outline.

它将产生以下结果-

轮廓颜色属性

outline-color属性允许您指定轮廓的颜色。与color和border-color属性一样，其值应为颜色名称，十六进制颜色或RGB值。

这是一个例子-


         This text is having thin solid red  outline.
      
      

      
      
         This text is having thick dashed green outline.
      
      

      
      
         This text is having 5x dotted blue outline.

它将产生以下结果-

轮廓属性

outline属性是一种简写属性，使您可以以任何顺序（但在一条语句中）为前面讨论的三个属性中的任何一个指定值。

这是一个例子-


         This text is having thin solid red outline.
      
      

      
      
         This text is having thick dashed green outline.
      
      

      
      
         This text is having 5x dotted blue outline.

它将产生以下结果-