Ist es möglich, eine partielle Grenze an allen Kanten eines div aus jeder Ecke zu haben? Ich möchte vermeiden background-image Eigenschaft & Verwenden Sie eine CSS-Lösung, um dies zu erreichen.Partielle Ränder von allen Ecken eines div CSS
Partielle Grenzen sind möglich mit der Pseudo : nach Eigentum, aber ich kann nicht herausfinden, wie man es an allen Kanten haben?
Das div sollte wie ein Fokus-Widget aussehen, wie im angehängten Bild gezeigt.
Dank.
Sicher, versuchen Sie dies:
HTML:
<div></div>
CSS:
div {
background: white;
padding: 1.7em;
position: relative;
width: 300px;
height: 300px;
margin: 3em auto;
border: solid 2px #d00;
}
div::before, div::after {
position: absolute;
background: inherit;
content: '';
z-index: 1;
}
div::before {
width: 100px;
left: calc(50% - 50px);
height: calc(100% + 4px);
top: -2px;
}
div::after {
height: 100px;
left: -2px;
width: calc(100% + 4px);
top: calc(50% - 50px);
}
div > * {
position: relative; z-index: 2; /* ensure any child elements sit above pseudos */
}
Wenn 'div 'hat Inhalt init, Inhalt wird hinter' Pseudo-Elemente' versteckt –
Nein, wird es nicht. Lesen Sie die endgültige CSS-Definition. – Utkanos
Sie können dies mit zwei zusätzlichen Elementen für Ränder tun, so dass Sie keine Hintergründe maskieren müssen und einen transparenten Hintergrund haben können.
.element {
width: 200px;
height: 200px;
margin: 50px;
position: relative;
padding: 10px;
}
.top-border,
.bottom-border {
position: absolute;
display: flex;
justify-content: space-between;
width: 100%;
height: 30%;
left: 0;
}
.top-border {
top: 0;
}
.bottom-border {
bottom: 0;
}
.top-border:after,
.top-border:before,
.bottom-border:after,
.bottom-border:before {
content: '';
width: 30%;
height: 100%;
}
.top-border:after,
.top-border:before {
border-top: 1px solid green;
}
.bottom-border:after,
.bottom-border:before {
border-bottom: 1px solid green;
}
.top-border:before,
.bottom-border:before {
border-left: 1px solid green;
}
.top-border:after,
.bottom-border:after {
border-right: 1px solid green;
}<div class="element">
<div class="top-border"></div>
<div class="bottom-border"></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, libero!</div>
</div>
Sie schreiben „Teilgrenzen sind möglich mit ...“, Sie den Code für diese teilen konnte, und in welcher Art und Weise, dass (nicht) funktioniert? –
@FlorianHeer Ich versuchte die Lösung von TrevC hier http://StackOverflow.com/Questions/4131490/any-way-to-limit-Border-Length –
@GaneshPutta "Ihr Code" ist auch plagiiert. Könnte zumindest Kredit gegeben haben ..... – Stewartside