CSS 轮廓宽度不起作用

我正在尝试将输入元素的轮廓宽度设置为焦点。 无论我的设置如何，轮廓宽度都保持不变（就像它是无法更改的默认设置一样）。

这是来自 codepen 的示例 http://codepen.io/FrenkyB/pen/mEaEyL?editors=1100

这是 css 的一部分，我试图在焦点上设置轮廓宽度：

input:focus {
  outline-width: 0.1px;
  outline-color: #725b44;  
}

EDIT:

我只是忘记包括线条样式（实线、点线......）。 现在可以了。有件事对我来说仍然很奇怪。为什么轮廓在元素内部？ 轮廓不是被定义为“围绕元素（边框之外）绘制的一条线，以使元素“突出”。”

从我的例子来看，大纲看起来像这样。我以为它会在 element 周围，但它在里面：

Add outline-style: solid到你的CSS。

由于默认样式为outline-style财产是none，您还必须设置它（none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit）。您可以为该样式使用的最佳价值是solid，但这是一个偏好问题。

行为示例：

input {
  font-size: 22px;
  padding: 5px 3px;
  color: #666;
}

input.with-outline-style:focus {
  outline-width: 3px;
  outline-style: solid;
  outline-color: #725b44;
  /* You could also use the shorthand: */
  /* outline: 3px solid #666; */
  /*       width style color */
}

input.without-outline-style:focus {
  outline-width: 3px;
  outline-color: #725b44;
}

body {
  background-color: #fd9;
}

div {
  padding: 5px 10px;
}

<div>
  <input type="text" class="with-outline-style" value="outline-style set to solid" />
</div>

<div>
  <input type="text" class="without-outline-style" value="outline-style not set" />
</div>

Update

The outline-width如果没有指定，设置将不起作用outline-style：如果没有设置轮廓样式，浏览器将以默认样式渲染轮廓（可以是任何样式，例如 IE 中的虚线矩形，Chrome 中的阴影矩形，甚至什么都没有）。