CSS outline(轮廓)是什么,小小编为你精准讲解

轮廓(outline)是绘制于元素周围的一条线,位于边框的外围(紧贴着边框),主要用来突出显示某个元素,如下图所示:

15095L004-0
图:轮廓(outline)

轮廓和边框看起来非常相似,但它们之间也并非没有区别,例如:

  • 元素上下左右四个方向上边框的样式、宽度、颜色可以单独设置,而轮廓在元素四个方向的宽度、样式、颜色都是相同的,不能单独设置;
  • 边框的宽度会直接影响元素的尺寸,而轮廓不会占用页面空间,不会影响页面的布局,但是轮廓会与页面上的其它元素发声重叠;
  • 除了会与周围的元素发声重叠外,轮廓对周围的元素没有任何影响;
  • 边框是元素尺寸的一部分,而轮廓不是,也就是说无论轮廓的宽度是多少,元素的尺寸都不会改变;
  • 轮廓可以不是矩形的,但您不能直接创建圆形轮廓。

您可以使用下面几个属性来为元素设置轮廓:

  • outline-color:设置轮廓的颜色;
  • outline-style:设置轮廓的样式;
  • outline-width:设置轮廓的宽度;
  • outline:轮廓的简写属性,可以使用 outline 属性中同时设置上面的三个轮廓属性;
  • outline-offset:设置轮廓与边框之间的距离。

1. outline-style

outline-style 属性可以设置轮廓得样式,属性得可选值如下所示:

描述
none 默认值,没有轮廓
dotted 定义点状的轮廓
dashed 定义虚线轮廓
solid 定义实线轮廓
double 定义双实线轮廓,两条实线之间的宽度等同于 outline-width 的值
groove 定义 3D 凹槽轮廓,具体效果取决于 outline-color 的值
ridge 定义 3D 凸槽轮廓,具体效果取决于 outline-color 的值
inset 定义 3D 凹边轮廓,具体效果取决于 outline-color 的值
outset 定义 3D 凸边轮廓,具体效果取决于 outline-color 的值
inherit 从父元素继承轮廓样式的设置

【示例】使用 outline-style 属性设置轮廓的样式:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. span {
  6. display: block;
  7. width: 100px;
  8. height: 100px;
  9. margin: 10px;
  10. float: left;
  11. text-align: center;
  12. line-height: 100px;
  13. /*为了能更直观的看出轮廓的效果,这里提前设置了轮廓的宽度和颜色*/
  14. outline-width: 8px;
  15. outline-color: #AAAAAA;
  16. }
  17. .dotted {
  18. outline-style: dotted;
  19. }
  20. .dashed {
  21. outline-style: dashed;
  22. }
  23. .solid {
  24. outline-style: solid;
  25. }
  26. .double {
  27. outline-style: double;
  28. }
  29. .groove {
  30. outline-style: groove;
  31. }
  32. .ridge {
  33. outline-style: ridge;
  34. }
  35. .inset {
  36. outline-style: inset;
  37. }
  38. .outset {
  39. outline-style: outset;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <span class=“dotted”>dotted</span>
  45. <span class=“dashed”>dashed</span>
  46. <span class=“solid”>solid</span>
  47. <span class=“double”>double</span>
  48. <span class=“groove”>groove</span>
  49. <span class=“ridge”>ridge</span>
  50. <span class=“inset”>inset</span>
  51. <span class=“outset”>outset</span>
  52. </body>
  53. </html>

运行结果如下图所示:

15095M432-1-1
图:outline-style 属性演示

注意:因为轮廓的默认样式为 none,所以您必须指定轮廓的样式才可以使轮廓显示在元素周围。

2. outline-width

outline-width 属性用来设置轮廓的宽度,只有当 outline-style 属性的值不为 none 时,outline-width 属性才会生效。outline-width 属性的可选值如下:

描述
thin 设置较细的轮廓
medium 默认值,设置中等宽度的轮廓
thick 设置较粗的轮廓
length 使用具体数值加单位(px、em、cm 等)的形式设置轮廓的宽度
inherit 从父元素继承轮廓的宽度

【示例】使用 outline-width 属性设置轮廓的宽度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div{
  6. width: 300px;
  7. height: 150px;
  8. outline-style: solid;
  9. outline-width: 5px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div></div>
  15. </body>
  16. </html>

运行结果如下图所示:

15095M1M-2
图:outline-width 属性演示

3. outline-color

outline-color 属性用来设置轮廓的颜色,属性的可选值如下:

描述
color 指定轮廓颜色,与使用 color、border-color 等属性设置颜色相同,您可以使用颜色名称、十六进制码和 RGB 值等形式定义具体颜色
invert 使用背景色的反色来设置轮廓的颜色,仅在 IE 和 Opera 浏览器下有效
inherit 从父元素继承轮廓颜色的设置

注意:如果只设置 outline-width 或 outline-color 属性的话,轮廓的设置并不会生效。您必须使用 outline-style 属性设置了轮廓的样式之后,才可以使用 outline-width 和 outline-color 属性来设置轮廓的宽度和颜色。

【示例】使用 outline-color 属性设置轮廓的颜色:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. background-color: #CCC;
  7. }
  8. p.one {
  9. outline-style: solid;
  10. outline-width: 5px;
  11. outline-color: red;
  12. }
  13. p.two {
  14. outline-style: groove;
  15. outline-width: 6px;
  16. outline-color: #AAA;
  17. }
  18. p.three {
  19. outline-style: inset;
  20. outline-width: 5px;
  21. outline-color: rgb(217, 0, 217);
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <p class=“one”>red</p>
  27. <p class=“two”>#AAA</p>
  28. <p class=“three”>rgb(217, 0, 217)</p>
  29. </body>
  30. </html>

运行结果如下图所示:

15095H5P-3
图:outline-color 属性演示

4. outline

outline 属性是上述 outline-width、outline-style、outline-color 三个属性的简写形式,使用 outline 属性可以同时设置这三个属性中的一个或多个,语法格式如下:

outline: outline-width outline-style outline-color;

在使用 outline 属性时,outline-width、outline-style、outline-color 这几个参数的顺序并不是固定的,您可以按照上面语法中介绍的顺序,也可以根据自己的喜好改变它们的顺序。

【示例】使用 outline 属性设置元素的轮廓:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.one {
  6. outline: solid 5px red;
  7. }
  8. p.two {
  9. outline: #AAA groove 6px;
  10. }
  11. p.three {
  12. outline: 5px inset rgb(217, 0, 217);
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <p class=“one”>red</p>
  18. <p class=“two”>#AAA</p>
  19. <p class=“three”>rgb(217, 0, 217)</p>
  20. </body>
  21. </html>

运行结果如下图所示:

15095H5P-3
图:outline 属性演示

5. outline-offset

默认情况下轮廓是紧贴着边框的,通过 outline-offset 属性可以设置轮廓与边框之间的距离,属性的可选值如下:

描述
length 使用具体数值加单位的形式设置轮廓与边框之间的距离,可以为负值
inherit 从父元素继承 outline-offset 属性的值

【示例】使用 outline-offset 设置轮廓与边框之间的距离:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 100px;
  7. height: 100px;
  8. margin: 50px 0px 0px 50px;
  9. border: 1px solid red;
  10. outline: 6px inset #AAA;
  11. outline-offset: 10px;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div></div>
  17. </body>
  18. </html>

运行结果如下图所示:

15095Ib7-5
图:outline-offset 属性演示
© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片