CSS outline（轮廓线）

cyqian 发布于2019-08-29 13:12 / 1115人阅读

摘要：的中文意思是轮廓线。是绘制于元素周围的一条线，位于边框边缘的外围，轮廓线不会占据空间，也不一定是矩形。定义点状的轮廓。控制轮廓线宽不是线长值描述规定细轮廓。规定中等的轮廓。允许您规定轮廓粗细的值。规定应该从父元素继承轮廓宽度的设置。

outline的中文意思是轮廓线。

是绘制于元素周围的一条线，位于边框(border)边缘的外围，

轮廓线不会占据空间，也不一定是矩形。

outline: color style width;    /* 简写方式 */

outline-color: #ff6700;    /* 分开写 */
outline-style: dashed;
outline-width: 5px;

CSS2的属性，所有浏览器都支持 outline 属性。如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。

这个样式被用在 button和input等一些元素的默认样式中，很多时候都是不需要这个默认样式的。这也是一个很容易让人遗忘的样式。（我大概忘记它5、6次了吧，刚好用到就顺便记下来了）

outline-color

控制轮廓颜色

值	描述
color_name	规定颜色值为颜色名称的轮廓颜色
hex_number	规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）。
invert	默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。

outline-style

控制轮廓样式

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。

outline-width

控制轮廓线宽（不是线长）

值	描述
thin	规定细轮廓。
medium	默认。规定中等的轮廓。
thick	规定粗的轮廓。
length	允许您规定轮廓粗细的值。
inherit	规定应该从父元素继承轮廓宽度的设置。

demo

效果：

云服务器 GPU云服务器轮廓线 outline outline大纲视图图像轮廓

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112442.html

CSS魔法堂：那个被我们忽略的outline

摘要：真心没法弄出圆角自从有了后，我们就可以通过制作圆角矩形圆形等图形，甚至连也受到影响从而实现元素阴影也能做到圆角的效果。那么是否也能做出圆角的效果呢答案是否定的。前言在CSS魔法堂：改变单选框颜色就这么吹毛求疵！中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^ ...

Rocko 2019-08-29 16:54 评论0 收藏0
CSS 边框轮廓阴影

摘要：概览边框本应该在盒模型一文中一并介绍，只因为避免篇幅较长特独立此文与轮廓和阴影一并介绍。之所以将边框，轮廓和阴影一并介绍，看下图就明白了轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。水平阴影的位置。阴影扩散的尺寸。概览边框本应该在盒模型一文中一并介绍，只因为避免篇幅较长特独立此文与轮廓和阴影一并介绍。之所以将边框，轮廓和阴影一并介绍，看下图就明白了： ...

姘存按 2019-08-28 18:19 评论0 收藏0
CSS揭秘之多重边框

摘要：多重边框的两种实现方案以由逗号分隔的列表来描述一个或多个阴影效果。轮廓与边框在以下几个方面存在不同轮廓不占据空间，它们被描绘于内容之上轮廓可以是非矩形的。是元素的轮廓，悬浮在元素边框之上。也就是说，它们之间的颜色会继承父元素的背景色。多重边框的两种实现方案： border-shadow outline Mutiple border ...

liuyix 2019-08-30 11:08 评论0 收藏0
【译】下一代选择器：CSS4

摘要：默认选项伪类伪类会匹配那些在一组相关的集合中作为默认选项的元素。浏览器对和支持范围伪类和这两个伪类对于那些要求数据介于一个指定范围的表单元素是非常有用的。因而应该像这样子的注意默认值是，不在数据允许的范围之内。 2014年1月，我写了一篇文章：The Current Generation of CSS3 Selectors，这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已...

yangrd 2019-08-28 18:10 评论0 收藏0