返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

CSS-大纲

时间:2020-06-12 13:20来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

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

  • 轮廓线不会占用空间。

  • 轮廓不必为矩形。

  • 轮廓在所有方面总是相同的;您不能为元素的不同面指定不同的值。

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

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

  • 轮廓宽度属性用于设置轮廓的宽度。

  • 外形风格属性被用于设置轮廓的线条样式。

  • 大纲的颜色属性用于设置轮廓的颜色。

  • 大纲属性用于设置所有在单个语句上述三个属性。

轮廓宽度属性

轮廓宽度属性指定了轮廓的宽度要被添加到该框。就像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-width:0;)

  • 实线 -轮廓是一条实线。

  • 点状 -轮廓是一系列点。

  • 虚线 -轮廓是一系列短线。

  • double-轮廓是两条实线。

  • 凹槽 -轮廓看起来像刻在页面上一样。

  •  -轮廓看起来与凹槽相反。

  • 插图 -轮廓使框看起来像它嵌入在页面中。

  • 起点 -轮廓使框看起来像是从画布中出来的。

  • 隐藏 -与没有相同。

这是一个例子-

现场演示
<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> 

它将产生以下结果-

轮廓颜色属性

大纲颜色属性允许您指定轮廓的颜色。与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> 

它将产生以下结果-

轮廓属性

大纲属性是一个速记属性,可以让你对任何以任何顺序,但在一个语句前面讨论过的三个属性的指定值。

这是一个例子-

现场演示
<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> 

它将产生以下结果-

 上一页  打印页面

------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • CSS-尺寸

    您已经看到了每个框周围的边框,即。 元素,可以出现在每个框内的填充以及可以围绕它...

  • CSS-游标

    CSS 的 cursor 属性允许您指定应该显示给用户的光标类型。 此属性的一种很好用法是使...

  • CSS-列表

    列表在传达一组编号或项目符号点时非常有用。 本章教您如何使用CSS控制列表类型,位置...

  • CSS-边距

    的 余量 属性定义围绕一个HTML元素的空间。 可以使用负值来重叠内容。 margin属性的值...

  • CSS-边框

    该 边框 属性允许您指定框的代表元素的边界应该是什么样子。 您可以更改边框的三个属...

  • CSS-使用图像

    图片在任何网页中都起着重要作用。 尽管不建议包含很多图像,但是在任何需要的地方使...

猜你感兴趣