• 技术文章 >web前端 >前端问答

    css outline-offset属性怎么用

    青灯夜游青灯夜游2019-05-29 13:16:28原创1282
    css outline-offset属性用于设置轮廓框架在 border 边缘外的偏移,即轮廓与边框边缘之间的距离。基本语法:outline-offset:length,length的单位可以是绝对单位(如px),也可以是相对单位(如:%)。

    css outline-offset属性怎么用?

    outline-offset 属性对轮廓进行偏移,并在边框边缘进行绘制。

    说明:轮廓在两方面与边框不同:轮廓不占用空间,轮廓可能是非矩形。

    语法:

    outline-offset: length|inherit;

    属性值:

    ● length:轮廓与边框边缘的距离。

    ● inherit:规定应从父元素继承 outline-offset 属性的值。

    注释:所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。

    css outline-offset属性 示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style> 
    div{
    margin:20px;
    width:150px; 
    padding:10px;
    height:70px;
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
    } 
    </style>
    </head>
    <body>
    <p><b>注释:</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p>
    <div>这个 div 在黑色边框边缘之外 15 像素处有一个红色的轮廓。</div>
    </body>
    </html>

    效果图:

    1.jpg

    以上就是css outline-offset属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css outline-offset属性
    上一篇:css margin-top属性怎么用 下一篇:css border-radius属性怎么用
    大前端线上培训班

    相关文章推荐

    • 你不知道的冷门CSS属性• css属性选择器实例• css属性有哪些?css常用属性的总结(实例)• css box-sizing属性怎么用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网