如何为 css 属性大纲设置多个值？答案

【问题标题】：How to set multiple values for the css property outline?如何为 css 属性大纲设置多个值？
【发布时间】：2020-10-14 08:24:25
【问题描述】：

我正在使用 IE11 来呈现我的一个对话框，所以除了默认的虚线边框（焦点按钮的现有样式）之外，我是否可以为 outline 属性再添加一个值，如下所示：

input[type=button]:focus{
  outline: 1px solid;
}

以这种方式添加实际上是替换 IE 设置的默认大纲值，所以我只是想知道是否可以同时获取两者。

谢谢。

【问题讨论】：

请将相关 HTML 添加到您的 sn-p 和预期输出中 - 例如屏幕截图或绘图
您的描述有点混乱。你在谈论边框和轮廓。边框和轮廓都是不同的。大纲获取显示在元素内容之外。你的意思是你想同时显示两种轮廓，如点和实线？如果是，那是不可能的。您一次只能指定一种样式。如果我在这里误解，请纠正我。您可以尝试提供有关该问题的更多信息，以帮助我们更好地了解该问题。

【解决方案1】：

大纲有一定程度的自定义，你甚至可以有双边框。

这个 MDN 页面有一些很好的例子来展示你可以拥有的不同风格。

&lt;button style="outline: thick double #32a1ce;"&gt;Foo&lt;/button&gt;

&lt;button style="outline: 8px ridge rgba(170, 50, 220, .6);"&gt;Foo&lt;/button&gt;

【讨论】：

【解决方案2】：

outline 最多可以取 3 个与border 相似的属性。

 outline-width
 outline-style
 outline-color

我在所有浏览器中都进行了测试，它似乎工作正常：

input[type=button]:focus{
  outline: 8px solid rgba(170, 50, 220, .6);
}

&lt;input type="button" name="submit" value="submit"&gt;

【讨论】：