• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • outline-width

    CSS 属性 outline-width 用于设置一个元素的轮廓的宽度。元素轮廓是绘制于元素周围的一条线,位于 border 的外围。

    示例

    /* Keyword values */
    outline-width: thin;
    outline-width: medium;
    outline-width: thick;
    
    /*  values */
    outline-width: 1px;
    outline-width: 0.1em;
    
    /* Global values */
    outline-width: inherit;
    

    浏览器支持

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

    语法:

    outline-width<length>| thin | medium | thick

    取值:

    • <length>:用长度值来定义轮廓的厚度。不允许负值
    • thin:定义比默认宽度细的轮廓。取决于用户代理。通常等同于桌面浏览器的 1px (包括 Firefox)。
    • medium:定义默认宽度的轮廓。取决于用户代理。通常等同于桌面浏览器的 3px (包括 Firefox)。
    • thick:定义比默认宽度粗的轮廓。取决于用户代理。通常等同于桌面浏览器的 5px(包括 Firefox)。
    默认值medium
    适用于所有元素
    继承性
    动画性当取值为<length>时
    计算值绝对长度;如果outline-width的值为none时,则计算值为0

    实例

    span {
      outline-style: solid;
      display: inline-block;
      margin: 20px;
    }
    
    #thin {
      outline-width: thin;
    }
    
    #medium {
      outline-width: medium;
    }
    
    #thick {
      outline-width: thick;
    }
    
    #twopixels {
      outline-width: 2px;
    }
    
    #oneex {
      outline-width: 1ex;
    }
    
    #em {
      outline-width: 1.2em;
    }
    
    <span id="thin">thin</span>
    <span id="medium">medium</span>
    <span id="thick">thick</span>
    <span id="twopixels">2px</span>
    <span id="oneex">1ex</span>
    <span id="em">1.2em</span>
    
    
    thinmediumthick2px1ex1.2em

    上篇:outline

    下篇:outline-color