Hoe maak je een binnenrand voor een vak in html?
Zie deze foto:
Antwoord 1, autoriteit 100%
Kijk hier eens naar, we kunnen dit eenvoudig doen met outline-offseteigenschap
Uitvoerafbeelding ziet eruit als
.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>Antwoord 2, autoriteit 8%
- Gebruik
dashedrandstijl voor omtrek. - Teken
background-colormet:beforeof:afterpseudo-element.
Opmerking:Met deze methode krijgt u maximale browserondersteuning.
Uitvoerafbeelding:
Antwoord 3, autoriteit 6%
Je kunt ook box-shadowgebruiken en transparantie toevoegen aan die gestippelde bordervia background-clipzodat je bodybackground.
voorbeeld
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>Antwoord 4, autoriteit 5%
.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>Antwoord 5, autoriteit 3%
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
}
Antwoord 6, autoriteit 3%
Kijk eens
<!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>
Antwoord 7, Autoriteit 3%
IE ondersteunt geen schets-offset, zodat een andere oplossing zou zijn om 2 div-tags te maken, één genest in de andere. De innerlijke zou een grens hebben en iets kleiner zijn dan de container.
.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>