Question

在CSS中，我可以设置轮廓宽度outline: 1px solid red，我可以使用outline-offset: 5px设置其偏移量（类似于填充）。

但是，此方法不允许padding使用的简写方法，例如border: 1px 2px 3px 4px，并且似乎没有outline-offset-left: 1px选项。

那么，有没有办法在CSS轮廓的每一侧设置不同的偏移量？请注意，我不想使用padding;它会偏向我想要的大纲，但它也会为我不想要的元素添加额外的填充，这就是我首先使用outline的全部原因。

Answer 1

根据MDN's docs on Outline，要在大纲上设置的唯一属性是：

outline是连接这些属性的简写。但由于以下事实，没有方定义：

轮廓可以是非矩形的。它们在Gecko / Firefox中是矩形的。但是例如Opera在这样的构造周围绘制一个非矩形的形状......

由于它们可能不是矩形的，因此能够定义 left ， top 等属性是没有意义的......

Answer 2

你可以通过一个很好的技巧来达到你想要的效果，但它可能必须根据具体情况来完成。

我的情况是我有一些带有填充的内容，其中包含几个 html 元素，包括一些锚点/链接。让我们想象一下 scss 是这样的：

.contanier {
  padding: 15px;
  > a {
    padding: 8px 0;
  }
}

当专注于锚点时，outline 几乎与文本接触并且通常看起来很糟糕。现在，正如您所说，为了轮廓而向锚点添加左/右填充会破坏内容的布局。锚点将不再与容器中的其他元素（例如标题/段落/图像/你有什么）内联显示。

所以为了解决这个问题，我向锚点添加了填充，并通过设置负边距来否定它：

> a {
  margin: 0 -4px;
  padding: 8px 4px;
}

现在我可以完全控制焦点的显示方式。在某些用例中，此解决方案不起作用，例如，如果您的锚点具有背景颜色。但在大多数情况下，它运行良好。