Chinaunix首页 | 论坛 | 博客
  • 博客访问: 654939
  • 博文数量: 42
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 480
  • 用 户 组: 普通用户
  • 注册时间: 2019-08-05 16:22
文章分类

全部博文(42)

文章存档

2020年(1)

2019年(41)

我的朋友

分类: Html/Css

2019-10-14 09:25:50

CSS轮廓

轮廓线是围绕边界(border)外的元素绘制的线,以使元素“脱颖而出”。

CSS具有以下轮廓属性:
  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

轮廓样式

outline-style属性指定轮廓的样式,并且可以具有以下值之一:
  • dotted - 定义虚线轮廓
  • dashed - 定义虚线轮廓
  • solid - 定义实线轮廓
  • double - 定义双重轮廓
  • groove - 定义3D凹槽轮廓
  • ridge - 定义3D脊状轮廓
  • inset - 定义3D插图轮廓
  • outset - 定义3D开始轮廓
  • none - 没有定义轮廓
  • hidden - 定义隐藏的轮廓
以下示例显示了不同的outline-style值:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>教程(jc2182.com)</title>
  6.     <style>
  7.         p {outline-color:red;}

  8.         p.dotted {outline-style: dotted;}
  9.         p.dashed {outline-style: dashed;}
  10.         p.solid {outline-style: solid;}
  11.         p.double {outline-style: double;}
  12.         p.groove {outline-style: groove;}
  13.         p.ridge {outline-style: ridge;}
  14.         p.inset {outline-style: inset;}
  15.         p.outset {outline-style: outset;}
  16.     </style>
  17. </head>
  18. <body>

  19. <h2>outline-style属性</h2>

  20. <p class="dotted">虚线轮廓</p>
  21. <p class="dashed">虚线轮廓</p>
  22. <p class="solid">实线轮廓</p>
  23. <p class="double">双重轮廓</p>
  24. <p class="groove">凹槽轮廓。效果取决于轮廓颜色值。</p>
  25. <p class="ridge">山脊轮廓。效果取决于轮廓颜色值。</p>
  26. <p class="inset">内凹轮廓。效果取决于轮廓颜色值。</p>
  27. <p class="outset">外凸轮廓。效果取决于轮廓颜色值。</p>

  28. </body>
  29. </html>

轮廓颜色

outline-color属性用于设置轮廓的颜色。颜色可以通过以下方式设置:
  • name - 指定颜色名称,如“red”
  • RGB - 指定RGB值,例如“rgb(255,0,0)”
  • 十六进制 - 指定十六进制值,如“#ff0000”
  • invert - 执行颜色反转(确保轮廓可见,无论颜色背景如何)
以下示例显示了具有不同颜色的一些不同轮廓。另请注意,这些元素在轮廓内部也有一个细黑色边框:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>蝴蝶教程(jc2182.com)</title>
  6.     <style>
  7.         p.ex1 {
  8.             border: 1px solid black;
  9.             outline-style: solid;
  10.             outline-color: red;
  11.         }

  12.         p.ex2 {
  13.             border: 1px solid black;
  14.             outline-style: double;
  15.             outline-color: green;
  16.         }

  17.         p.ex3 {
  18.             border: 1px solid black;
  19.             outline-style: outset;
  20.             outline-color: yellow;
  21.         }
  22.     </style>
  23. </head>
  24. <body>

  25. <h2>边框色属性</h2>

  26. <p class="ex1">红色实线轮廓</p>
  27. <p class="ex2">绿色双线轮廓</p>
  28. <p class="ex3">黄色外突轮廓</p>

  29. </body>
  30. </html>

轮廓宽度

outline-width属性指定轮廓的宽度,并且可以具有以下值之一:
  • thin (通常为1px)
  • medium (通常为3px)
  • thick(通常为5px)
  • 特定尺寸(以px,pt,cm,em等为单位)
以下示例显示了一些具有不同宽度的轮廓:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>蝴蝶教程(jc2182.com)</title>
  6.     <style>
  7.         p.ex1 {
  8.             border: 1px solid black;
  9.             outline-style: solid;
  10.             outline-color: red;
  11.             outline-width: thin;
  12.         }

  13.         p.ex2 {
  14.             border: 1px solid black;
  15.             outline-style: solid;
  16.             outline-color: red;
  17.             outline-width: medium;
  18.         }

  19.         p.ex3 {
  20.             border: 1px solid black;
  21.             outline-style: solid;
  22.             outline-color: red;
  23.             outline-width: thick;
  24.         }

  25.         p.ex4 {
  26.             border: 1px solid black;
  27.             outline-style: solid;
  28.             outline-color: red;
  29.             outline-width: 4px;
  30.         }</style>
  31. </head>
  32. <body>

  33. <h2>outline-width 属性</h2>

  34. <p class="ex1">一个 thin 轮廓</p>
  35. <p class="ex2">一个 medium 轮廓</p>
  36. <p class="ex3">一个 thick 轮廓</p>
  37. <p class="ex4">一个 4px 轮廓</p>

  38. </body>
  39. </html>

所有CSS轮廓属性

属性 描述
outline 在一个声明中设置轮廓宽度、轮廓样式和轮廓颜色的简写属性
outline-color 设置轮廓的颜色
outline-offset 指定轮廓与元素的边或边框之间的间距
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度
更详细的轮廓文章
HTML样式
阅读(101) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~