Question

我希望能够在我的Div外面画一个边框！因此，如果我的div是20px乘20px，我想要一个1px边界（在本质上，我得到一个div 22x22px大）。

我知道我可以让div 22x22开始，但由于我的原因，我需要边框在外面。

CSS大纲有效，但我只想要border-bottom或border-top thingy，所以像outline-bottom这样的东西不起作用，就是我想要的。

有办法做到这一点吗？

由于

Answer 1

我认为你已经对这两个属性有了一点了解。边框影响元素的外边缘，使元素的大小不同。大纲不会改变元素的大小或位置（不占用空间）并超出边界。根据您的描述，您想使用border属性。

在浏览器中查看以下简单示例：

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>

<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

注意边框如何推动底部div，但轮廓不会移动顶部div，轮廓实际上与底部div重叠。

你可以在这里阅读更多相关信息：
Border
Outline

Answer 2

IsisCode为您提供了一个很好的解决方案。另一个是将边界div 放在父div中。请查看此示例http://jsfiddle.net/A2tu9/

UPD：您还可以使用伪元素:after（:before），在这种情况下，HTML不会受到额外标记的污染：

.my-div {
    position: relative;
    padding: 4px;
    ...
}
.my-div:after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: -3px;
    right: -3px;
    border: 1px #888 solid;
}

演示：http://jsfiddle.net/A2tu9/191/

Answer 3

尝试大纲属性W3Schools - CSS Outline

大纲不会干扰元素/ div的宽度和长度！

请点击我在底部提供的链接查看工作演示您可以制作边框的不同方式，以及内部/内联边框，甚至是那些不会破坏元素尺寸的边框！不需要每次都添加额外的div，如另一个答案所述！

您还可以将边框与轮廓结合使用，如果愿意，还可以使用框阴影（也可通过链接显示）

<head>
   <style type="text/css" ref="stylesheet">
      div {
        width:22px;
        height:22px;
        outline:1px solid black;
      }
   </style>
</head>
<div>
    outlined
</div>

通常默认情况下，＆＃39; border：＆＃39;将边框放在宽度的外侧，测量，增加整体尺寸，除非你使用＆＃39; inset＆＃39;值：

div {border: inset solid 1px black};

但是＆＃39;概述：＆＃39;是边界之外的额外边框，当然还会为元素增加额外的宽度/长度。

希望这有帮助

PS：我也受到启发，为你做这件事：Using borders, outlines, and box-shadows

Answer 4

为什么不简单地使用background-clip？

-webkit-background-clip: padding;
   -moz-background-clip: padding;
        background-clip: padding-box;

请参阅：
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip

Answer 5

迟到了，但我遇到了类似的问题。我的解决方案是伪元素 - 没有额外的标记，你可以在不影响宽度的情况下绘制边框。绝对定位伪元素（主要定位相对）和whammo。

见下文，JSFiddle http://jsfiddle.net/mcx6m/

.hello {
    position: relative;

    // Styling not important   
    background: black;
    color: white;
    padding: 20px;  
    width: 200px;
    height: 200px;
}
.hello:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: 0;
    border-left: 5px solid red;
    border-right: 5px solid red;
    z-index: -1;
}

Answer 6

将div放在另一个div中，使用 n 填充/边距量将边框应用于外部div，其中 n 是你想要的空间。

Answer 7

我根据您的需要提供了两种解决方案：

<style type="text/css" ref="stylesheet">
  .border-inside-box {
    border: 1px solid black;
  }
  .border-inside-box-v1 {
    outline: 1px solid black; /* 'border-radius' not available */
  }
  .border-outside-box-v2 {
    box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
  }
</style>

示例：https://codepen.io/danieldd/pen/gObEYKj

边境外的CSS

7 个答案:

演示：http://jsfiddle.net/A2tu9/191/