Html 使用CSS绘制一条方形线，插入div中

我想知道是否有可能追踪一个1px的正方形轮廓，在一个div中插入一个特定的距离

.反对{ 宽度：100px； 高度：100px； 背景色：红色； 颜色：白色； 填充物：5px； } 你好，世界！

---

像这样的东西应该可以

.object {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    padding: 5px;
    position: relative;
}
.object::after {
    content:"";
    display: block;
    position: absolute;
    width: 97.5px;
    height: 97.5px;
    top: 5px;
    left: 5px;
    border: 1px solid #fff;
}

您可以使用border属性并设置边距，因为边距在边距之外。如果不想更改div的总大小，请减少填充以补偿边距。

方法01：

可以绘制轮廓并使用“轮廓偏移”特性

注：IE不支持轮廓偏移

.反对{ 外形：实心fff 1px； 轮廓偏移：-5px； 宽度：100px； 高度：100px； 背景色：红色； 颜色：白色； 保证金：5px； 填充：10px； } 你好，世界！ 您可以使用长方体阴影属性：

.反对{ 宽度：100px； 高度：100px； 背景色：红色； 边框：1px纯白； 颜色：白色； 保证金：5px； 填充物：5px； 长方体阴影：0 5px红色； } 你好，世界！

---

也可以使用两个框阴影：

.反对{ 宽度：100px； 高度：100px； 背景色：红色； 颜色：白色； 填充物：5px； 盒影：嵌入0 0 4px红色，嵌入0 0 5px fff； } 你好，世界！

---

您可以通过在div中添加span或编写jquery脚本来自动添加来解决此问题

.object、.object js{ 宽度：100px； 高度：100px； 背景色：红色； 颜色：白色； 填充物：5px； 位置：相对位置； } .object span、.object js span{ 边框：1px实心ffffff； 填充：2px； 高度：calc100%-5px； 显示：块； 溢出y：自动； } 你好，世界。 你好，世界。 $document.readyfunction{ var html=$.object-js.html； $.object js.html+html+； };

---

Beaut，我知道必须有一个css属性，我在谷歌上搜索inset和Start，但没有考虑尝试寻找偏移量。这也是一个很好的解决方案，就像轮廓偏移一样简单，它可以与IE一起工作。谢谢！