CSS 框的外观 outline属性

在CSS中，outline属性用来为元素绘制轮廓，该属性在CSS2.1中就已经定义，但并未得到各主流浏览器的广泛支持。在CSS3中，对outline属性进行了增强，其语法格式为：

outline：[ outline-width ] | [ outline-style ] | [ outline-color ]

也就是说，outline属性可以分解为 outline-width、outline-style、outline-color 这 3 个参数值来定义轮廓的宽度、轮廓的样式和轮廓的颜色。各参数的含义见表 4‑8：

表 4-8 outline属性的参数及含义
参数	含义
outline-width	轮廓的宽度，与borde-width属性取值相同，请参阅。如果outline-style设置为none，则忽略该属性。
outline-style	轮廓的样式，与borde-style属性取值基本相同（但少了值 hidden），请参阅。如果outline-width等于0，则忽略该属性。
outline-color	轮廓的颜色，与borde-color属性取值基本相同，请参阅。如果outline-width等于0或outline-style设置为none，则忽略该属性。

默认情况下，轮廓是以border边界为起点，从0开始向外延伸。轮廓和边框不是同一个东西，它们可以在同一个元素上共存。

为了灵活控制，CSS3增加了outline-offset属性，用来控制轮廓的起点与border边界的距离。outline-offset属性的值可以是正值，也可以是负值，正值表示起点在border外，负值表示起点在border内。无论正值或负值，轮廓都是从起点向外延伸。如：

div {
width: 100px;
height: 40px;
border: 1px dashed #ccc;
outline: 14px solid #444;
outline-offset: 10px;
}

上述代码，在距容器边框10px的地方，添加了一个宽度为14px的浅黑色实线轮廓。运行结果如图 4‑71 所示：

图4-71 outline和outline-offset效果

添加轮廓的目的，主要是为了突显元素。轮廓与边框有点类似，但二者又有重要的区别。首先，轮廓不在文档流中，它不占用空间，因此轮廓出现或消失都不会导致文档重新显示，也不会不影响元素的尺寸。其次，轮廓可以是矩形，也可以不是矩形。最后，在元素四条边上的轮廓是完全相同的，不能单独设置。

虽然轮廓不占用空间，显示或消失都不会影响文档流，也不会破坏页面布局。但是，在轮廓很宽时，它会与相邻的元素重叠，而影响到相邻的元素。

有些浏览器会向获得焦点的文本输入框应用轮廓，指示用户键入时会从哪里开始输入。当然这并非必要，有时候反而会妨碍用户输入。如果不愿意，可以把 outline-style 设置为 none，来阻止浏览器这么做。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS 框的外观 outline属性相关推荐

[css] 你用过outline属性吗？它有什么运用场景
[css] 你用过outline属性吗?它有什么运用场景 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 个人简介我是歌谣,欢迎和大家一起交流前后端知识 ...
html中outline属性,css 轮廓（outline）属性是如何使用的
一.什么是css轮廓(outline)属性轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 举个例子来说吧:在我们平时阅读浏览器里的内容时,当鼠标点击让一个 ...
html中outline属性,css的outline属性的作用是什么
css的outline属性的作用是什么发布时间:2020-05-06 11:47:34 来源:亿速云阅读:280 作者:小新 css的outline属性的作用是什么?相信有很多人都不太了解,今天小 ...
CSS outline属性以及和border属性的区别
CSS outline 属性定义和用法 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 注释:轮廓线不会占据空间,也不一定是矩形. outline 简写 ...
html中outline属性,css outline属性怎么用？
CSS outline属性是一个简写属性,用于在一个声明中设置所有的轮廓属性,如颜色.样式.宽度,可在元素周围位于边框边缘的外围绘制一条线,能起到突出元素的作用. CSS outline属性作用:是 ...
CSS属性(一)之outline属性
outline属性表示轮廓具体位置如下图所示(位于经典盒子模型的border和margin之间): 和其他属性一样可以通过outline一次性设置所有的轮廓属性,也可以通过他旗下的几个属性对轮廓进行设 ...
css盒子子类继承父类哪些,css不继承父类的属性有哪些
css不继承父类的属性有:display.width.height.margin .border.float.clear.position.top.right.bottom.left.backgrou ...
css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性属性用途语法(一些 ...
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...

CSS 框的外观 outline属性

CSS 框的外观 outline属性相关推荐

最新文章

热门文章