Ich möchte den linken Rand meines div nur zur Hälfte des div zeigen. Das gleiche würde ich gerne mit meinem rechten Rand machen, sollte aber vom unteren Rand des div bis zur Mitte des div gesetzt werden. Wie kann ich es erreichen?css border-left 50% height
Gute Frage. Das Verwenden der Eigenschaft border ist nicht möglich.
Das einzige, was in den Sinn kommt, wenn Sie Ihre divs position-relative zu verwenden, ist eine absolut positioniert, 1 Pixel breit div einstellen. Nicht gründlich getestet, aber diese sollte Arbeit:
<div style='width: 1px; top: 0px; bottom: 50%; left: 0px;
background-color: blue; overflow: hidden'>
</div>
Sie würden das gleiche auf der rechten Seite tun, anstelle der left Eigenschaft von right.
Denken Sie daran, die Umgebung div muss position: relative sein, damit dies funktioniert. Ich bin mir nicht sicher, ob die Einstellung für die Höhe von 50% in allen Browsern einheitlich funktioniert - stellen Sie sicher, dass Sie sie testen. Sie müssen möglicherweise zu Pixelmaßen greifen, wenn dies nicht der Fall ist.
wirklich erstaunlich, das war ich suche nach ... –
Eine Art-ähnlicher, aber andere Herangehensweise an @ Pekka ist: Verwenden Sie den :after Pseudo-Selektor, etwa so:
HTML-Code:
<div class="mybox">
Le content de box.
</div>
CSS:
.mybox {
position: relative;
padding: 10px 20px;
background-color: #EEEEEE;
}
.mybox:after {
content: '';
position: absolute;
bottom: 0px;
left: 25%;
width: 50%;
border-bottom: 1px solid #0000CC;
}
... und eine jsFiddle für ein gutes Maß.
Randnotiz, wie dies ist eine meiner beliebtesten Antworten: Sie können auch die ': vor 'Pseudo-Selektor verwenden, wenn Sie möchten. Händlerwahl. Der einzige Grund, warum ich '' nachher '' verwendet habe, ist, weil ich die visuelle Hierarchie genieße, so dass das 'Ding am unteren Ende' 'nachher' geht. – indextwo
können Sie verwenden:
line-height:50%; /*(or less, much less)*/
overflow:visible;
Der Text sichtbar ist, aber die Grenze Farbe wird nur bei der Hälfte der div Größe sein.
Danke Das funktioniert für mich – NaveenDA
2018: Für modernen Browsern:
Sie border-image mit Steigungen etwas verwenden können, wie ...
border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%);
border-image-slice: 1;
Demo:https://jsfiddle.net/hz8wp0L0/
Tool:Gradient Editor
Kann ich verwenden:border-image(IE11)
Sie dies nicht direkt tun können. Es gibt mehrere Möglichkeiten, dies zu lösen. aber zuerst, hast du eine feste Breite und/oder Höhe? – choise
Sie müssen es fälschen. Bilder, js, gefälschte divs ... –
ja, es ist eine feste Breite. Ich weiß, dass ich dies tun kann, indem ich einige Bilder usw. anführe und wie kann ich das mit JS tun? –