dashed
pour le contour.background-color
avec le pseudo-élément :before
ou :after
.Remarque: Cette méthode vous permettra de prendre en charge au maximum votre navigateur.
Image de sortie:
* {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>
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
}
Jetez un coup d'oeil s'il vous plait
<!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>
.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>
Vous pouvez également utiliser box-shadow
et ajouter de la transparence à cette border
en pointillés via background-clip
pour vous permettre d'afficher body
background
.
exemple
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>
IE ne supportant pas le contour-offset, une autre solution serait de créer 2 balises div, l'une imbriquée dans l'autre. L'intérieur aurait une bordure et serait légèrement plus petit que le conteneur.
.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>