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

    outline-color CSS属性被用于设置一个元素轮廓的颜色.

    示例

    outline-color: red;
    outline-color: #32a1ce;
    outline-color: rgba(170, 50, 220, .6);
    outline-color: hsla(60, 90%, 50%, .8);
    outline-color: currentcolor;
    

    大多时候使用outline会更方便而不是outline-style,outline-widthoutline-color.元素轮廓是绘制于元素周围的一条线,位于border的外围,使元素突出。不像border,轮廓在元素的外绘制并且可能与其他元素重叠。而border不会出现这种现象(除非故意).

    /* color values */
    outline-color: #f92525;
    outline-color: rgb(30,222,121);
    outline-color: blue;
    
    /* Keyword value */
    outline-color: invert;
    
    /* Global values */
    outline-color: inherit;
    outline-color: initial;
    outline-color: unset;
    

    浏览器支持

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

    语法:

    outline-color<color>| invert

    取值:

    • <color>:轮廓颜色,规则同<color>
    • invert:使用背景色的反色。,用于确认轮廓的显示。注意不是所有浏览器都支持该属性,若不则该属性无效.
    默认值invert
    适用于所有元素
    继承性
    动画性当取值为<color>时
    计算值invert;当指定为半透明时则对应一个rgba()计算值;如果非半透明值则对应一个rgb()计算值,transparent对应rgb(0,0,0,0)

    实例

    <p>my outline is blue, as you can see.</p>
    
    p {
     outline: 2px solid;      /* set the outline width and style */
     outline-color: #0000ff;  /* make the outline blue */
     margin: 5px;
    }
    

    上篇:outline-width

    下篇:outline-style