outline属性-关于input获取焦点时的边框(划去，其实是轮廓)设置

直入正题点这里

　　今天跟着视频做静态网页练习的时候，有用到 标签做查询输入框。因为代码是跟着视频来写的，所以布局的样式都没啥毛病，但是当我点击输入框，让其获得焦点时，输入框就会显示出来一个黑色的边框（如下图）。

　　看到这个框框我就很纳闷，我根本没有设置这样的属性啊！这个莫名其妙的黑色框框是哪里来的？难道我少写了什么代码？

　　抱着这样的疑问，我又重新看了一遍视频中的相关部分，发现我的代码跟视频中的一模一样，可是视频中老师并没有讲到关于这个框框的问题，他在写好这部分代码后压根就没点过输入框...

　　发现视频不能解决问题后我就开始自己试了。我以为它就是一个默认的表单元素获取到焦点时的边框设置，于是我就写了如下代码，想要取消掉这个设置

input:focus {
    border: 0;
    /* 通过伪类设置 input 获取到焦点时的边框 */
}

　　结果发现没啥用，我想着怎么可能呢，input 获取焦点的选择器没错啊，边框设置的也没错啊，怎么会没效果呢？于是我就又写了如下测试代码

input:focus {
    border: 5px red solid;
}

　　结果是出人意料的

　　预想中的红色边框出现了（由于边框会改变盒子的实际大小，所以我的放大镜被挤到下面去了...），可那个黑色框框（真是硬骨头）居然也还在！那家伙不是边框？？？！！！

　　我发现依靠我一个人的力量已经不能解决这个问题了，所以我只好求助广大网友。以下是从网上查到的东西

进入正题

　　首先，那个黑色的框框并不是边框，而是称作轮廓（outline）。它是围绕元素周围的一条线，位于边框边缘的外围（之前根本不知道边框之外除了外边距还能有属性）。它的作用是用于突出元素。可以从下图直观的了解轮廓的位置。

　　感觉有点像边框之外的另一个边框，所谓山外有山，人外有人，边框之外有轮廓！

　　通过 outline 属性（一个CSS属性），我们可以指定元素轮廓的样式（style）、颜色（color）和宽度（width）。outline 是一个复合属性，其语法为： outline: width style color，其中三个属性值的顺序是没有要求的，除了 style 外，其他的两个属性值是可选的（这一点跟 border 一样）。另外，outline 也可以拆分成：outline-width、outline-style、outline-color 来写。

　　outline 最重要的一个值是 style 的值，它决定着轮廓的样式和有无。下面的表格将列出 outline-style 的取值及所表示的含义

值	描述
none	默认值，定义无轮廓
dotted	定义点状轮廓
dashed	定义虚线轮廓
solid	定义视线轮廓
double	定义双线轮廓，双线的宽度等同于 outline-width 的值。
inherit	规定应该从父元素继承轮廓样式的设置。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。

最后，是一个小栗子

    
    
    
    



    "text" value="请输入关键词">

效果图：