Fatal编程技术网
  • css/
  • Css 如何在不占用任何额外空间的情况下渲染div的边框？

Css 如何在不占用任何额外空间的情况下渲染div的边框？

css

Css 如何在不占用任何额外空间的情况下渲染div的边框？,css,Css,如何在不占用任何额外空间的情况下将边框应用于div？边框必须在div内。使用所需边框在当前div内包含一个内部div。您可以使用负边距对其进行补偿，或者只需使用outline div { border: 10px solid red; margin: -10px}; 或 或者，您可以使用css3 boxshadow来伪造边框 例如： 您有3种选择： 内盒和外盒（如@xpapad所述） 使用outline，例如outline:1px#000固体 使用css3属性的框大小调整。例如，框大小：边框框

如何在不占用任何额外空间的情况下将边框应用于div？边框必须在div内。

使用所需边框在当前div内包含一个内部div。

您可以使用负边距对其进行补偿，或者只需使用outline

div { border: 10px solid red; margin: -10px};
或

或者，您可以使用css3 boxshadow来伪造边框

例如： 您有3种选择：

  • 内盒和外盒（如@xpapad所述）
  • 使用
    outline
    ，例如
    outline:1px#000固体

  • 使用css3属性的
    框大小调整
    。例如，
    框大小：边框框

    尝试使用与边框相等的负边距，例如
    

    border-right:1px;
margin-right:-1px;

    

    对于我的用例，box shadow属性是正确的选择
    
更准确地说，框阴影具有0模糊和一点扩散
    
它创建的“边框”不在div内，但不会占用额外的HTML空间
    


    按钮{
背景：白色；
字号：2rem；
填充：1rem2rem；
颜色：#4f93df；
边界半径：2em；
保证金：1rem；
}
.怀特伯德{
盒影：0px 0px 0px 4px#4f93df；
}
    

    
你好
世界

    
你好

    我改为使用框阴影技术，它是在内部渲染的。在不改变图像大小的情况下，圆形边框是一个不错的选择。加上轮廓，使用类似边框的边框：纯黑；但它仍然占据着空间。@Justcode要注意的是，轮廓就像装饰，而不是物理边界。它与它下面的z索引中的任何内容重叠。它没有尺寸，只有宽度和高度：P@TaylorS我同意。但它不占用空间。这就是我想要的谢谢。我很久以前就需要它了。

    border-right:1px;
margin-right:-1px;