乐趣区

关于前端:CSS-不规则的轮廓outline

jiezi

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员. 如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏, 理解更多前端常识! 点我摸索新世界！

原文链接 ==>http://sylblog.xin/archives/39

前言

日常开发中，咱们常常应用 border 来给元素减少一些美感，然而因为盒子模型的存在，border 有时候会影响咱们的判断，所以明天咱们来介绍另一个属性来为元素减少一些美感。

outline

outlineCSS 中的属性在元素的内部绘制一条线。它相似于边界，除了：

  1. 它总是围绕所有边，你不能指定特定的边
  2. 它不是盒模型的一部分，因而不会影响元素或相邻元素的地位，也就是说 outline outline 不占据空间
  3. 它并不总是矩形

兼容性

除了 IE 浏览器，其余浏览器兼容性还是不错的。

语法

outline: [<outline-width> || <outline-style> || <outline-color>] | inherit

由此可见 outline 也是一个缩写的属性。

outline: 1px dashed red;

不占空间

首先定义一个 p 标签和一个 div 标签，而后 div 标签定义一个 5px 的 border 和一个 20px 的 outline

p {outline: 1px dashed red;}
div {
    border:5px solid #000;
  outline: 20px dashed red;
}

<p>outline: 1px dashed red;</p>

<div>outline: 20px dashed red;</div>

最终的成果，能够分明的看到 div 上定义的 outlin 曾经跑到了 p 标签上。

不一是矩形

应用 span 进行测试，应用 br 进行换行，使得每一行的字数都不一样。

  <span> 我是 outline<br />
        我能够创立非矩形 <br />
        的边框 </span>
        
span {outline: 1px dashed red;}

最终成果，能够看见 outline 只在字下面有。

换成 border 咱们再试试

border:1px solid #000;

乍一看，如同 border 创立的也是不规则的呀，然而再认真看，边框其实并不是不规则的，只是换行了而已。

outline-style 轮廓款式

属性值

dotted

dashed

solid

double

groove

ridge

inset

outset

outline-color 轮廓色彩

色彩值

outline-color: invert;

invert (IE 兼容）

经测试：最新版的 chrome 和火狐浏览器不反对此值
仅在 IE 中测试应用

比照

页面的背景色彩是红色，outline 就是彩色。
` outline-color: invert;
`

页面的背景色彩是彩色，outline 就是红色。

outline-width 轮廓宽度

属性值

thin

1px

medium

3px

thick

5px

\<length\>

outline-width: 10px;

outline-offset 轮廓偏移

数值

当参数值为负数时，示意轮廓向外偏移
outline-offset: 10px;

当参数值为负值时，示意轮廓向内偏移

outline-offset: -10px;

退出移动版