css outline-style属性怎么用

2024-01-18 09:58 小编
 cssoutline-style属性怎么用?
 
  outline-style属性用于设置元素的整个轮廓的样式。样式不能是none,否则轮廓不会出现。
 
  语法:
 
  outline-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;
 
  属性值:
 
  ●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属性需始终在outline-color属性之前声明,因为元素只有获得轮廓以后才能改变其轮廓的颜色。
 
  注释:
 
  outline是围绕元素,它是围绕元素的边距;但是,它是来自不同的边框属性。
 
  轮廓不是元素尺寸的一部分,因此元素的宽度和高度属性不包含轮廓的宽度。轮廓线不会占据空间,也不一定是矩形。
 
  cssoutline-style属性示例
 
  
 
  
 
  
 
  <!DOCTYPE>
 
  <html>
 
  <head>
 
  <metacharset="UTF-8">
 
  <styletype="text/css">
 
  p{
 
  border:1pxsolidred;
 
  }
 
  p.dotted{
 
  outline-style:dotted;
 
  }
 
  p.dashed{
 
  outline-style:dashed;
 
  }
 
  p.solid{
 
  outline-style:solid;
 
  }
 
  p.double{
 
  outline-style:double;
 
  }
 
  p.groove{
 
  outline-style:groove;
 
  }
 
  p.ridge{
 
  outline-style:ridge;
 
  }
 
  p.inset{
 
  outline-style:inset;
 
  }
 
  p.outset{
 
  outline-style:outset;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <pclass="dotted">点线轮廓</p>
 
  <pclass="dashed">虚线轮廓</p>
 
  <pclass="solid">实线轮廓</p>
 
  <pclass="double">双线轮廓</p>
 
  <pclass="groove">凹槽轮廓</p>
 
  <pclass="ridge">垄状轮廓</p>
 
  <pclass="inset">嵌入轮廓</p>
 
  <pclass="outset">外凸轮廓</p>
 
  <p><b>注意:</b>如果只有一个!DOCTYPE指定IE8支持outline属性。</p>
 
  </body>
 
  </html>


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码