如何为html中的框创建内边框？答案

【问题标题】：How to create a inner border for a box in html?如何为html中的框创建内边框？
【发布时间】：2017-05-26 05:16:40
【问题描述】：

如何为 html 中的框创建内边框？

看这张照片：

【问题讨论】：

【解决方案1】：

HTML：

<div class="outerDiv">
    <div class="innerDiv">Content</div>
</div>

CSS：

.outerDiv{
    background: #000;
    padding: 10px;
 }

 .innerDiv{
     border: 2px dashed #fff;
     min-height: 200px; //adding min-height as there is no content inside

 }

【讨论】：

【解决方案2】：

为轮廓使用dashed 边框样式。
用:before 或:after 伪元素绘制background-color。

注意：此方法将使您获得最大的浏览器支持。

输出图像：

* {box-sizing: border-box;}

.box {
  border: 1px dashed #fff;
  position: relative;
  height: 160px;
  width: 350px;
  margin: 20px;
}

.box:before {
  position: absolute;
  background: black;
  content: '';
  bottom: -10px;
  right: -10px;
  left: -10px;
  top: -10px;
  z-index: -1;
}

<div class="box">

</div>

【讨论】：

【解决方案3】：

请看一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .box{ width:500px; height:200px; background:#000; border:2px solid #ccc;}
        .inner-border {
            border: 20px solid black;
            box-shadow: inset 0px 0px 0px 10px red;
            box-sizing: border-box; /* Include padding and border in element's width and height */
        }
        /* CSS3 solution only for rectangular shape */
        .inner-outline {
            outline: 10px solid red;
            outline-offset: -30px;
        }
    </style>
    </head>

    <body>
    <div class="box inner-border inner-outline"></div>
    </body>
    </html>

【讨论】：

【解决方案4】：

看看这个，我们可以简单地用outline-offset属性做到这一点

输出图像的样子

.black_box {
    width:500px;
    height:200px;
    background:#000;
    float:left;
    border:2px solid #000;
    outline: 1px dashed #fff;
    outline-offset: -10px;
}

&lt;div class="black_box"&gt;&lt;/div&gt;

【讨论】：

这绝对是答案 - 简短、干净和简单。
outline 在 IE 中不受支持
我更喜欢这个答案，而不是使用带有插图的盒子阴影，这是许多其他 Stack Overflow 问题的解决方案。当我用盒子阴影插入的另一种方式尝试它时，我的数字不会正确居中。您的解决方案不会影响我在 div 中的任何其他元素。 +1

【解决方案5】：

IE 不支持轮廓偏移，因此另一种解决方案是创建 2 个 div 标签，一个嵌套在另一个标签中。内部的将有一个边框，并且比容器略小。

.container {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 100px;
  background: #000000;
  padding: 10px;
}
.inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #000000;
  border: 1px dashed #ffffff;
}

<div class="container">
  <div class="inner"></div>
</div>

【讨论】：

【解决方案6】：

.blackBox {
    width: 100%;
    height: 200px;
    background-color: #000;
    position: relative;
    color: cyan;
    padding: 20px;
    box-sizing: border-box;
}

.blackBox::before {
	position: absolute;
    border: 1px dotted #fff;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    content: "";
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="blackBox">Created an inner border box. <br> Working fine all major browsers.</div>

</body>
</html>

【讨论】：

我没有使用outline-offset属性，因为outline-offset不支持IE浏览器。

【解决方案7】：

您也可以使用box-shadow 并通过background-clip 为虚线border 添加透明度，让您看到body background。

例子

h1 {
  text-align: center;
  margin: auto;
  box-shadow: 0 0 0 5px #1761A2;
  border: dashed 3px #1761A2;
  background: linear-gradient(#1761A2, #1761A2) no-repeat;
  background-clip: border-box;
  font-size: 2.5em;
  text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white;
  font-size: 2.5em;
  min-width: 12em;
}
body {
  background: linear-gradient(to bottom left, yellow, gray, tomato, purple, lime, yellow, gray, tomato, purple, lime, yellow, gray, tomato, purple, lime);
  height: 100vh;
  margin: 0;
  display: flex;
}
::first-line {
  color: white;
  text-transform: uppercase;
  font-size: 0.7em;
  text-shadow: 0 0
}
code {
  color: tomato;
  text-transform: uppercase;
  text-shadow: 0 0;
}
em {
  mix-blend-mode: screen;
  text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white
}

<h1>transparent dashed border<br/>
  <em>with</em> <code>background-clip</code>
</h1>

Pen to play with

在 Firefox 中渲染：

【讨论】：

值得指出的是，与使用轮廓不同的是，如果您使用边框半径创建非矩形 div，box-shadow 解决方案会起作用。