css outline-style属性设置轮廓样式

原创 国哥笔记  2019-03-05 11:37  阅读 283 views 次

outline-style属性定义及用法

在css中,outline-style属性是使用来设置轮廓的样式的,所谓轮廓就是绘制于元素周围的一条线,位于边框边缘的外围,不是元素尺寸的一部分,因此元素的宽度和高度属性不包含轮廓的宽度。轮廓与边框不同,轮廓不占用空间,轮廓可能是非矩形。

如果需要同时设置元素轮廓的多个属性,建议使用outline简写属性,通过outline属性可以简化代码,将轮廓的多个属性定义在一个声明中,可以设置的轮廓属性分别是(按顺序):outline-color、outline-style、outline-width

outline-style属性语法格式

  1. css语法:outline-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/inherit;
  2. JavaScript语法:object.style.outlineStyle="dotted";

属性值说明:

  • 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属性的值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css outline-style属性设置轮廓样式</title>
<style type="text/css">
div{width:300px;height:60px;border:1px solid #000;margin-top:10px;}
#div1{outline-style:dotted;}/*点状的轮廓*/
#div2{outline-style:dashed;}/*虚线轮廓*/
#div3{outline-style:double;}/*双线轮廓*/
</style>
</head>
<body>
<div id="div1">点状的轮廓</div>
<div id="div2">虚线轮廓</div>
<div id="div3">双线轮廓</div>
</body>
</html>

运行结果:

css outline-style属性设置轮廓样式

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-outline-style.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情