css3 outline-offset属性轮廓偏移

原创 国哥笔记  2019-03-05 11:16  阅读 340 views 次

outline-offset属性定义及用法

在css中,outline-offset属性是使用来设置轮廓框架在border边缘外的偏移,就是设置轮廓框架与border边缘的距离。所谓轮廓框架就是绘制于元素周围的线,位于边框边缘的外围,不是元素尺寸的一部分,因此元素的宽度和高度属性不包含轮廓的宽度。

轮廓与边框不同,轮廓不占用空间,轮廓可能是非矩形。

outline-offset属性必须和outline-style属性一起使用,这很好理解,元素必须要有轮廓(outline-style属性定义轮廓样式)才能对其进行设置。

outline-offset属性是css3新增属性,目前主流浏览器都支持了该属性,但是Internet Explorer 浏览器还不支持outline-offset属性。

outline-offset属性语法格式

  1. css语法:outline-offset: length/inherit;
  2. JavaScript语法:object.style.outlineOffset="15px";

属性值说明

  • length:轮廓与边框边缘的距离;
  • inherit:从父元素继承outline-offset属性的值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 outline-offset属性轮廓偏移</title>
<style type="text/css">
div{width:300px;height:60px;border:1px solid #000;outline:1px solid red;margin-top:50px;}
#div1{outline-offset:10px;}
#div2{outline-offset:20px;}
</style>
</head>
<body>
<div id="div1">outline-offset:10px;</div>
<div id="div2">outline-offset:20px;</div>
</body>
</html>

运行结果:

css3 outline-offset属性轮廓偏移

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-outline-offset.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情