Chinaunix首页 | 论坛 | 博客

web全栈

首页　| 　博文目录　| 　关于我

web全栈

  • 博客访问： 1913120
  • 博文数量： 45
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 515
  • 用 户 组： 普通用户
  • 注册时间： 2019-08-05 16:22
文章分类

全部博文（45）

文章存档

2020年（4）

2019年（41）

我的朋友
最近访客
推荐博文
CSS轮廓方法大全

分类： 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;}

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

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

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

  32. </body>
  33. </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.         }

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

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

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

  30. <p class="ex1">红色实线轮廓</p>
  31. <p class="ex2">绿色双线轮廓</p>
  32. <p class="ex3">黄色外突轮廓</p>

  34. </body>
  35. </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.         }

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

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

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

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

  39. <p class="ex1">一个 thin 轮廓</p>
  40. <p class="ex2">一个 medium 轮廓</p>
  41. <p class="ex3">一个 thick 轮廓</p>
  42. <p class="ex4">一个 4px 轮廓</p>

  44. </body>
  45. </html>

所有CSS轮廓属性

属性 描述
在一个声明中设置轮廓宽度、轮廓样式和轮廓颜色的简写属性
设置轮廓的颜色
指定轮廓与元素的边或边框之间的间距
设置轮廓的样式
设置轮廓的宽度

阅读(1070) | 评论(0) | 转发(0) |
0

上一篇：JavaScript Console 控制台打印方式你都懂多少

下一篇：HTML iframe详谈

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6