当文本框获取焦点时，我们可以看到文本框周围会出现一条淡蓝色的轮廓线。很多小伙伴之前想要改变这条轮廓线默认的样式，却完全不知道怎么去实现。

在CSS3中，我们可以使用outline属性来定义表单中文本框的轮廓线样式。

语法：

outline: width style color;

说明：

第1个值指的是轮廓线宽度（outline-width），第2个值指的是轮廓线样式（outline-sytle），第3个值指的是轮廓线颜色（outline-color）。

outline属性跟border属性很相似，我们可以把轮廓线看成是一条特殊的边框来理解。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        input[type="text"]:focus
        {
            outline:1px solid red;
        }
    </style>
</head>
<body>
    <input id="txt" type="text">
</body>
</html>

默认情况下，预览效果如下图所示。

当我们点击文本框后，此时预览效果如下图所示.

分析：

input[type=“text”]:focus表示定义文本框获取焦点时的样式，这个选择器看似复杂，拆分出来看就很简单了。此外，outline属性相当有用，特别是在美化搜索框样式的时候经常用到。