• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 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;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE8以上版本的浏览器都支持outline-style

    语法:

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

    取值

    • none:无轮廓(outline-width0).
    • dotted:轮廓为一系列点
    • dashed:轮廓为一系列短线
    • solid:轮廓为实线
    • double:轮廓为两根有空隙的线.outline-width为线与空间的总和
    • groove:轮廓呈凹下状
    • ridge:与groove相反:轮廓呈凸起状
    • inset:轮廓呈嵌入状.
    • outset:与inset相反:轮廓呈突出状.
    默认值none
    适用于所有元素
    继承性
    动画性
    计算值指定值

    示例

    <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; }
     

    Outline Demo

    <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; }
     

    Outline Demo

    <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; }
    

    Outline Demo

    <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; }
    

    Outline Demo

    上篇:outline-color

    下篇:outline-offset