javascript - 在不更改 DOM 的情况下创建彩色边距，因为边框会像填充一样影响标记

Question

我试图看看是否有一种方法可以在不更改 DOM 的情况下更改 CSS 中的边距颜色，但我不确定如何弄清楚。 margin 本身只需要诸如“auto|inherit|number (px|$|vs|vh)”之类的东西，所以我不知道它是否是一些东西的组合。

我将如何完成这样的事情？

我的赌注似乎是实际进行 DOM 操作。

仅靠 CSS 就能实现我的目标吗？

我的理由是我正在为一个视觉演示做一些缩放，并想添加一个黑色边框，类似于 iPad 和其他平板电脑的边框。我注意到的问题是，添加一个边框可以将所有内容缩放得更多一点(不是我想要的)。

我标记 javascript 的原因是因为在 javascript 中可能有一个技巧，在 css 的范围之外可以解决这个问题(而不改变 DOM)。

这可能吗？有人试过这个吗？

Answer 1

您可以在不使用任何额外的 dom 元素的情况下创建彩色边框...您有几个不同的选择——可能更多。

使用框阴影:

.foo {
    width: 250px;
    height: 250px;
    background: green;
    box-shadow: 0 0 0 10px black;
}

在伪元素上使用线性渐变:

.bar {
    margin-top: 50px;
    width: 250px;
    height: 250px;
    background: orange;   
}

.bar:before {
    content: '';
    position: absolute;
    width: 250px;
    height: 50px;
    background: linear-gradient(90deg, #000, #000)
}

DEMO

希望我没有误解你的意思......