无涯教程网

关注我们

CSS - 轮廓(Outlines)

CSS - 轮廓(Outlines)

轮廓与边框非常相似，但是也没有什么主要区别-

轮廓不占用空间。
轮廓不必一定是矩形的。

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

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

outline-width 属性

outline-width属性指定要添加到框的轮廓的宽度。就像border-width属性一样，其值应为thin，medium或thick，零像素的宽度表示没有轮廓。

<html>
   <head>
   </head>
   
   <body>
      <p style="outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style="outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style="outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

它将产生以下输出-

outline-style 属性

outline-style 属性指定围绕元素的line(solid，dotted或dashed)的样式。它可以采用以下值之一-

none - 无边框。 (相当于outline-width:0;)
solid - 轮廓是一条实线。
dotted - 轮廓是一系列点。
dashed - 轮廓是一系列短线。
double - 轮廓是两条实线。
groove - 轮廓看起来像刻在页面上。
ridge - 轮廓与凹槽相反。
inset - 轮廓使框看起来像嵌入在页面中。
outset - 轮廓使框看起来像是从画布中出来的。
hidden - 跟none相同。

<html>
   <head>
   </head>
   
   <body>
      <p style="outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style="outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style="outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

它将产生以下输出-

outline-color 属性

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

<html>
   <head>
   </head>
   
   <body>
      <p style="outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style="outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

它将产生以下输出-

outline 属性

outline属性是一种简写属性，它允许您以任何顺序(单个语句)为前面讨论的三个属性中的任何一个指定值。

<html>
   <head>
   </head>
   
   <body>
      <p style="outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style="outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style="outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Flutter核心技术与实战 -〔陈航〕

视觉笔记入门课 -〔高伟〕

职场求生攻略 -〔臧萌〕

分布式数据库30讲 -〔王磊〕

人人都用得上的写作课 -〔涵柏〕

说透元宇宙 -〔方军〕

高并发系统实战课 -〔徐长龙〕

Dubbo源码剖析与实战 -〔何辉〕

工程师个人发展指南 -〔李云〕

好记忆不如烂笔头。留下您的足迹吧 :)