outline-style

outline-style CSS 属性被用于设置一个元素轮廓的样式。元素轮廓是绘制于元素周围的一条线，位于border的外围，使元素突出

示例

/* 关键字 值 */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* 全局 值*/
outline-style: inherit;
outline-style: initial;
outline-style: unset;

浏览器支持

IE8以上版本的浏览器都支持outline-style

语法：

outline-style：none | dotted | dashed | solid | double | groove | ridge | inset | outset

取值

• none：无轮廓(outline-width为0).
• dotted：轮廓为一系列点
• dashed：轮廓为一系列短线
• solid：轮廓为实线
• double：轮廓为两根有空隙的线.outline-width为线与空间的总和
• groove：轮廓呈凹下状
• ridge：与groove相反:轮廓呈凸起状
• inset：轮廓呈嵌入状.
• outset：与inset相反:轮廓呈突出状.

示例

<div>
  <div class="dotted">
    <p class="dashed">outline demo</p>
  </div>
</div> 

.dotted {
  outline-style: dotted; /* 于 "outline: dotted"等价 */
}
.dashed {
  outline-style: dashed;
}

/* 让效果更清楚 */ 
* { outline-width: 10px; padding: 15px; }
 

<div>
  <div class="solid">
    <p class="double">outline demo</p>
  </div>
</div> 

.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

* { outline-width: 10px; padding: 15px; }
 

<div>
  <div class="groove">
    <p class="ridge">outline demo</p>
  </div>
</div>

.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* 让效果更清楚 */ 
* { outline-width: 10px; padding: 15px; }

<div>
  <div class="inset">
    <p class="outset">outline demo</p>
  </div>
</div>

.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/* 让效果更清楚 */ 
* { outline-width: 10px; padding: 15px; }