Html 如何为html中的框创建内边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41590469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a inner border for a box in html?
提问by DigiMan
How to Create a inner border for a box in html?
如何为html中的框创建内边框？
See this picture:
看这张图：
回答by Jishnu V S
Take a look at this , we can simply do this with outline-offsetproperty
看看这个，我们可以简单地用outline-offset属性来做到这一点
Output image look like
输出图像看起来像
.black_box {
width:500px;
height:200px;
background:#000;
float:left;
border:2px solid #000;
outline: 1px dashed #fff;
outline-offset: -10px;
}<div class="black_box"></div>回答by Mohammad Usman
- Use
dashedborder style for outline. - Draw
background-colorwith:beforeor:afterpseudo element.
- 使用
dashed边框样式作为轮廓。 background-color使用:before或:after伪元素绘制。
Note:This method will allow you to have maximum browser support.
注意：此方法将使您获得最大的浏览器支持。
Output Image:
输出图像：
* {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>回答by Hari Om Srivastava
Please have a look
请看一看
<!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>
回答by Taniya
Html:
网址：
<div class="outerDiv">
<div class="innerDiv">Content</div>
</div>
CSS:
CSS：
.outerDiv{
background: #000;
padding: 10px;
}
.innerDiv{
border: 2px dashed #fff;
min-height: 200px; //adding min-height as there is no content inside
}
回答by Vinod Kumar
.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>回答by G-Cyrillus
You may also use box-shadowand add transparency to that dashed bordervia background-clipto let you see bodybackground.
您也可以使用box-shadow和添加透明到虚线border通过background-clip，让你看到bodybackground。
example
例子
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>render in firefox:
在火狐中渲染：
回答by Martina Sartor
IE doesn't support outline-offset so another solution would be to create 2 div tags, one nested into the other one. The inner one would have a border and be slightly smaller than the container.
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>