将边框放置在div内部而不是边缘

11 回答

• 3

  雅虎这确实是可能的 . 我找到了 .

  对于底边：

  div {box-shadow: 0px -3px 0px red inset; }
  

  对于顶级边框：

  div {box-shadow: 0px 3px 0px red inset; }
  

  回复于 2024-04-28T23:14:00+08:00
• 3

  如果使用box-sizing：border-box不仅表示border，padding，margin等 . 所有元素都将出现在parent元素中 .

  div p {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      width: 150px;
      height:100%;
      border: 20px solid #f00;
      background-color: #00f;
      color:#fff;
      padding: 10px;
    
  }
  

  <div>
    <p>It was popularised in the 1960s with the release of Letraset sheets</p>
  </div>
  

  回复于 2024-04-28T23:14:00+08:00
• 73

  虽然使用 box-shadow 和 outline 属性的解决方案已经充分回答了这个问题，但我想稍微扩展一下这对于那些已经登陆这里的人（像我一样）寻找内部边界的解决方案 an offset

  所以，假设你有一个黑色的100px x 100px div ，你需要用白色边框插入它 - 其中 inner offset 为5px（比方说） - 这仍然可以通过上述属性完成 .

  box-shadow

  这里的技巧是知道允许多个盒阴影，其中第一个阴影位于顶部，后续阴影具有较低的z排序 .

  有了这些知识，box-shadow声明将是：

  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
  

  div {
    width: 100px;
    height: 100px;
    background: black;
    box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
  }
  

  <div></div>
  

  基本上，该声明所说的是：首先渲染最后一个（10px白色）阴影，然后渲染其上方的前一个5px黑色阴影 .

  轮廓与轮廓偏移

  为了与上述相同的效果，大纲声明将是：

  outline: 5px solid white;
  outline-offset: -10px;
  

  div {
    width: 100px;
    height: 100px;
    background: black;
    outline: 5px solid white;
    outline-offset: -10px;
  }
  

  <div></div>
  

  NB: outline-offset isn't supported by IE如果这对你很重要 .

  ---

  Codepen演示

  回复于 2024-04-28T23:14:00+08:00
• 0

  我知道这有点老了，但由于关键词“border inside”让我直接来到这里，我想分享一些可能值得一提的发现 . 当我在悬停状态下添加边框时，我得到了OP正在谈论的效果 . 边框将像素广告到框的尺寸，使其变得有弹性 . 还有两种方法可以解决这个问题，也适用于IE7 .

  1）边框已经附加到元素上，只需更改颜色即可 . 这种方式已经包含了数学 .

  div {
     width:100px;
     height:100px;
     background-color: #aaa;
     border: 2px solid #aaa; /* notice the solid */
  }
  
  div:hover {
     border: 2px dashed #666;
  }
  

  2）用负边距补偿你的边界 . 这仍将添加额外的像素，但元素的定位不会跳跃

  div {
     width:100px;
     height:100px;
     background-color: #aaa;
  }
  
  div:hover {
    margin: -2px;
    border: 2px dashed #333;
  }
  

  回复于 2024-04-28T23:14:00+08:00
• 564

  你也可以像这样使用box-shadow：

  div{
      -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
      -moz-box-shadow:inset 0px 0px 0px 10px #f00;
      box-shadow:inset 0px 0px 0px 10px #f00;
  }
  

  示例：http://jsfiddle.net/nVyXS/（悬停到查看边框）

  这仅适用于现代浏览器 . 例如：没有IE 8支持 . See caniuse.com (box-shadow feature)了解更多信息 .

  回复于 2024-04-28T23:14:00+08:00
• 21

  使用pseudo element：

  .button {
      background: #333;
      color: #fff;
      float: left;
      padding: 20px;
      margin: 20px;
      position: relative;
  }
  
  .button::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 5px solid #f00;
  }
  

  <div class='button'>Hello</div>
  

  使用 ::after ，您将为所选元素的虚拟最后一个子元素设置样式 . content 属性创建匿名replaced element .

  我们使用相对于父级的绝对位置来包含伪元素 . 然后你可以自由地在主元素的背景中拥有任何自定义背景和/或边框 .

  此方法不会影响主元素内容的放置，这与使用 box-sizing: border-box; 不同 .

  考虑这个例子：

  .parent {
      width: 200px;
  }
  
  .button {
      background: #333;
      color: #fff;
      padding: 20px;
      border: 5px solid #f00;
      border-left-width: 20px;
      box-sizing: border-box;
  }
  

  <div class='parent'>
      <div class='button'>Hello</div>
  </div>
  

  这里使用父元素约束 .button width . 设置 border-left-width 会调整内容框大小，从而调整文本的位置 .

  .parent {
      width: 200px;
  }
  
  .button {
      background: #333;
      color: #fff;
      padding: 20px;
      position: relative;
  }
  
  .button::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 5px solid #f00;
      border-left-width: 20px;
  }
  

  <div class='parent'>
      <div class='button'>Hello</div>
  </div>
  

  使用伪元素方法不会影响内容框大小 .

  根据应用程序，使用伪元素的方法可能是也可能不是理想的行为 .

  回复于 2024-04-28T23:14:00+08:00
• 32

  为了在新旧浏览器之间进行一致的渲染，添加一个双容器，外部带宽度，内部带边框 .

  <div style="width:100px;">
  <div style="border:2px solid #000;">
  contents here
  </div>
  </div>
  

  这显然只有你的精确宽度比额外加价更重要！

  回复于 2024-04-28T23:14:00+08:00
• 2

  可能是迟来的回答，但我想与我的发现分享 . 我找到了2个新方法来解决这个问题，我在答案中没有找到：

  内部边框通过box-shadow css属性

  是的，box-shadow用于向元素添加框阴影 . 但是你可以指定 inset shadow，它看起来像一个内边框而不是阴影 . 您只需要将水平和垂直阴影设置为 0px ，将 box-shadow 的“ spread ”属性设置为您想要的边框宽度 . 因此，对于10px的'inner'边界，您将编写以下内容：

  div{
      width:100px;
      height:100px;
      background-color:yellow;
      box-shadow:0px 0px 0px 10px black inset;
      margin-bottom:20px;
  }
  

  这是jsFiddle示例，说明了 box-shadow border和'normal' border之间的区别 . 这样你的边框和盒子宽度总共100px，包括边框 .

  关于box-shadow的更多信息：here

  通过大纲css属性边框

  这是另一种方法，但这种方式边框将在框外 . 这是an example . 如下例所示，您可以使用css outline 属性，用于设置不影响元素宽度和高度的边框 . 这样，边框宽度不会添加到元素的宽度 .

  div{
     width:100px;
     height:100px;
     background-color:yellow;
     outline:10px solid black;
  }
  

  更多关于大纲：here

  回复于 2024-04-28T23:14:00+08:00
• 6

  您可以使用属性大纲和轮廓偏移量为负值，对我来说：

  outline: 2px solid red;
  outline-offset: -2px;
  

  回复于 2024-04-28T23:14:00+08:00
• 6

  将 box-sizing 属性设置为 border-box ：

  div {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      width: 100px;
      height: 100px;
      border: 20px solid #f00;
      background: #00f;
      margin: 10px;
  }
  
  div + div {
      border: 10px solid red;
  }
  

  <div>Hello!</div>
  <div>Hello!</div>
  

  它适用于IE8 & above .

  回复于 2024-04-28T23:14:00+08:00
• 283

  最好的跨浏览器解决方案（主要用于IE支持）如@Steve所说的是在宽度和高度上设置一个98px的div，而不是在它周围添加1px的边框，或者你可以为div 100x100 px制作一个背景图像并在其上绘制边框 .

  回复于 2024-04-28T23:14:00+08:00