由 hrs, 29 九月, 2021

outline-style属性设置元素的轮廓

轮廓的样式

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      *{  
        margin-left:5px;
      }   
      p{  
      outline-color:red;
      width:300px;
      }   
      .dotted{
        outline-style:dotted;
      }   
      .dashed{
        outline-style:dashed;
      }   
      .solid{
        outline-style:solid;
      }   
      .double{
        outline-style:double;
      }   
      .groove{
        outline-style:groove;
      }   
      .ridge{
        outline-style:ridge;

      }   
      .inset{
        outline-style:inset;

      }   
      .outset{
        outline-style:outset;
      }   
    </style>
  </head>

  <body>
    <h1>outline-style属性</h1>
    <p class="dotted">点状轮廓</p>
    <p class="dashed">虚线轮廓</p>
    <p class="solid">实线轮廓</p>
    <p class="double">双线轮廓</p>
    <p class="groove">凹槽轮廓。效果取决于outline-color值</p>
    <p class="ridge">凸脊轮廓。效果取决于outline-color值</p>
    <p class="inset">凹边轮廓。效果取决于outline-color值</p>
    <p class="outset">凸边轮廓。效果取决于outline-color值</p>
  </body>
</html>