Html CSS轮廓宽度不工作

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

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

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

编辑：

我刚刚忘了包括线条样式（实线、虚线…）。 现在它起作用了。有一件事对我来说仍然很奇怪。为什么轮廓在元素内？ “轮廓”不是指围绕元素（在边框外）绘制的一条线，以使元素“突出”吗

在我的示例中，提纲如下所示。我以为它会在元素周围，但它在里面：

---

您应该添加

1px

而不是

0.1px

的

轮廓样式

input:focus {
  outline:1px solid #725b44;  
}

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

---

使用

轮廓样式

input:focus {
  outline:1px solid #725b44;  
}

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

试一试

或

.divMain{
高度：100vh；
宽度：100vw；
边框：0px纯黑；
}
.divLogin{
位置：绝对位置；
左：20%；
最高：5%；
宽度：300px；
高度：600px；
边框：1px实心#CF6B08；
边界半径：3px；
}
#divLogin{
背景:#FFCC99；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（#FAC28A，#FFCC99）；
/*适用于Safari 5.1至6.0*/
背景：-o-线性梯度（#FAC28A，#FFCC99）；
/*歌剧11.1至12.0*/
背景：-moz线性梯度（#FAC28A，#FFCC99）；
/*适用于Firefox 3.6至15*/
背景：线性梯度（#FAC28A，#FFCC99）；
/*标准语法*/
}
斯潘蒂尔先生{
位置：绝对位置；
顶部：10px；
左：10px；
字体大小：20px；
颜色：#003399；
字体大小：粗体；
}
.输入优先{
位置：绝对位置；
顶部：50px；
左边距：5px；
宽度：计算（100%-10px）；
高度：30px；
}
.DivWarningPutFirst{
位置：绝对位置；
宽度：计算（100%-10px）；
高度：30px；
顶部：88px；
左边距：5px；
边框：0px纯黑；
背景色：#fcdcbb；
颜色：#ff0000；
字体大小：粗体；
垫面：5px；
左侧填充：5px；
}
.divWarningInputFirst:之后{
内容：“；
位置：绝对位置；
顶部：-5px；
左：8px；
边框样式：实心；
边框宽度：0 5px 6px；
边框颜色：#fcdcbb透明；
显示：块；
宽度：0；
z指数：1；
}
输入：焦点{
外形：3px实心#725b44；
}
输入{
边框颜色：透明；
左：3倍；
框大小：边框框；
}

登录
请先输入

将

轮廓样式：实体添加到css中

由于
轮廓样式
属性的默认样式为
无
，因此也必须对其进行设置（
无|隐藏|虚线|实心|双|凹槽|脊|插入|起始|初始|继承
）。您可以为样式使用的最佳值是
solid
，但这是首选项

行为示例：


输入{
字体大小：22px；
填充物：5px 3px；
颜色：#666；
}
输入。轮廓样式：焦点{
轮廓宽度：3倍；
轮廓样式：实心；
轮廓颜色：#725b44；
/*您还可以使用速记：*/
/*外形：3px实心#666*/
/*宽度样式颜色*/
}
输入。无大纲样式：焦点{
轮廓宽度：3倍；
轮廓颜色：#725b44；
}
身体{
背景色：#fd9；
}
div{
填充物：5px10px；
}
仅当您指定
轮廓样式时，
轮廓宽度
才会生效。请检查并让我知道您的反馈。谢谢

下面的片段：


.divMain{
高度：100vh；
宽度：100vw；
边框：0px纯黑；
}
.divLogin{
位置：绝对位置；
左：20%；
最高：5%；
宽度：300px；
高度：600px；
边框：1px实心#CF6B08；
边界半径：3px；
}
#divLogin{
背景:#FFCC99；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（#FAC28A，#FFCC99）；
/*适用于Safari 5.1至6.0*/
背景：-o-线性梯度（#FAC28A，#FFCC99）；
/*歌剧11.1至12.0*/
背景：-moz线性梯度（#FAC28A，#FFCC99）；
/*适用于Firefox 3.6至15*/
背景：线性梯度（#FAC28A，#FFCC99）；
/*标准语法*/
}
斯潘蒂尔先生{
位置：绝对位置；
顶部：10px；
左：10px；
字体大小：20px；
颜色：#003399；
字体大小：粗体；
}
.输入优先{
位置：绝对位置；
顶部：50px；
左边距：5px；
宽度：计算（100%-10px）；
高度：30px；
}
.DivWarningPutFirst{
位置：绝对位置；
宽度：计算（100%-10px）；
高度：30px；
顶部：88px；
左边距：5px；
边框：0px纯黑；
背景色：#fcdcbb；
颜色：#ff0000；
字体大小：粗体；
垫面：5px；
左侧填充：5px；
}
.divWarningInputFirst:之后{
内容：“；
位置：绝对位置；
顶部：-5px；
左：8px；
边框样式：实心；
边框宽度：0 5px 6px；
边框颜色：#fcdcbb透明；
显示：块；
宽度：0；
z指数：1；
}
输入：焦点{
轮廓宽度：3倍；
轮廓样式：实心；
轮廓颜色：#725b44；
}
输入{
边框颜色：透明；
左：3倍；
框大小：边框框；
}

登录
请先输入
0.1px到底是什么样子？大多数broswers要么不显示，要么将其四舍五入到1px。如果我想要3px呢？如果我设置3px，它不起作用。宽度保持不变。使用
轮廓：1px实心#725b44适用于我，如果我把
轮廓宽度：3px同样，更容易使用这种语法：
大纲：9px纯蓝色为什么
轮廓宽度
在未指定轮廓样式的情况下不起作用？因为默认轮廓样式是
无
。如果不指定样式，浏览器将以其默认样式呈现轮廓（可以是任何样式，例如IE中的虚线矩形、Chrome中的着色矩形，甚至什么都没有）。