• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • outline

    CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性,例如outline-style,outline-widthoutline-color

    示例

    /* 样式 */
    outline: solid;
    
    /* 颜色 | 样式 */
    outline: #f66 dashed;
    
    /* 样式 | 宽度 */
    outline: inset thick;
    
    /* 颜色 | 样式 | 宽度 */
    outline: green solid 3px;
    
    /* 全局值 */
    outline: inherit;
    outline: initial;
    outline: unset;
    

    border 和 outline

    border 和 outline 很类似,但有如下区别:

    • 轮廓不占据空间,绘制于元素内容周围。
    • 根据规范,轮廓通常是矩形,但也可以是非矩形的。

    浏览器支持

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

    语法:

    outline:<outline-color>| <outline-style>| <outline-width>

    取值:

    • <outline-color>:设置轮廓的颜色。没有设置时默认值为currentcolor。参见outline-color
    • <outline-style>:设置轮廓的样式。没有设置时默认值为none。参见outline-style
    • <outline-width>:设置轮廓的宽度。没有设置时默认值为medium。参见outline-width
    默认值看每个独立属性
    适用于所有元素
    继承性
    动画性看每个独立属性
    计算值看每个独立属性

    可访问性考虑

    outline设置为0none会移除浏览器的默认聚焦样式。如果一个元素可交互,这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式,记得提供一个显眼的聚焦样式。

    实例

    /* two identical declarations */
    
    :link:hover { outline: 1px solid #000; }
    :link:hover { outline: solid black 1px; }
    

    上篇:appearance

    下篇:pointer-events