Wie kann man einem Element mit CSS einen Rahmen geben, ohne die gesamte Breite des Elements mit einer Rahmenbreite zu versehen?

Wie kann man einem Element mit CSS einen Rahmen geben, ohne die gesamte Breite des Elements mit einer Rahmenbreite zu versehen?

Wie in Photoshop können wir Striche geben - innen, in der Mitte und außen

Ich denke, die Standard-CSS-Rahmeneigenschaften sind Mitte wie Mitte in Photoshop. Stimmt das?

Ich möchte innerhalb der Box einen Rand geben, nicht außerhalb. und möchten die Rahmenbreite nicht in die Feldbreite einbeziehen.

outline:1px solid white;

Dies fügt die zusätzliche Breite und Höhe nicht hinzu.

Schauen Sie sich die CSS-Box-Größe an ...

Die CSS3-Eigenschaft mit Boxgröße kann dies tun. Der Randfeldwert (im Gegensatz zum Standardwert für das Inhaltsfeld) legt fest, dass das endgültig gerenderte Feld die deklarierte Breite aufweist und dass alle Rahmen und Polsterungen innerhalb des Felds ausgeschnitten werden. Sie können jetzt sicher deklarieren, dass Ihr Element 100% breit ist, einschließlich pixelbasierter Auffüllung und Rahmen, und Ihr Ziel perfekt erreichen.

• -webkit-box-sizing: border-box; / * Safari / Chrome, anderes WebKit * /
• -Moz-Box-Größe: Border-Box; / * Firefox, anderer Gecko * /
• Box-Größe: Border-Box; / * Opera / IE 8+ * /

Ich würde vorschlagen, ein Mixin zu erstellen, um dies für Sie zu erledigen. Weitere Informationen zur Boxgröße finden Sie unter W3c unter http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Abhängig von Ihrer beabsichtigten Browserunterstützung können Sie die box-shadowEigenschaft verwenden.

Sie können den Unschärfewert auf 0 und die Streuung auf die gewünschte Dicke einstellen. Das Tolle an Box Shadow ist, dass Sie steuern können, ob es außerhalb (standardmäßig) oder innerhalb (mithilfe der insetEigenschaft) gezeichnet wird .

Beispiel:

box-shadow: 0 0 0 1px black; // Outside black border 1px

oder

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

Ein großer Vorteil der Verwendung von Box-Schatten besteht darin, dass Sie kreativ werden können, indem Sie mehrere Box-Schatten verwenden:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

Das einzige, was ich nicht sagen kann, ist, welchen Unterschied dies beim Rendern der Leistung macht. Ich würde annehmen, dass es zu einem Problem werden könnte, wenn Sie Hunderte von Elementen, die diese Technik verwenden, gleichzeitig auf dem Bildschirm haben würden.

Ich bin auf das gleiche Problem gestoßen.

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

Mit dieser Antwort können Sie eine einzelne Seite angeben. Und würde in IE8 + funktionieren - im Gegensatz zur Verwendung von Box-Shadow.

Ändern Sie natürlich die Eigenschaften Ihrer Pseudoelemente, wenn Sie eine bestimmte Seite herausgreifen müssen.

* Neu und verbessert *

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

Dies ermöglicht die Verwendung von Rahmen und das Schlagen mehrerer Seiten einer Box.

Verwenden Sie diese Optionbox-sizing: border-box , um einen Rahmen IN einem Div zu erstellen, ohne die Div-Breite zu ändern.

Verwenden Sie outlinediese Option , um einen Rahmen AUSSERHALB eines Div zu erstellen, ohne die Div-Breite zu ändern.

Hier ein Beispiel: https://jsfiddle.net/4000cae9/1/

Hinweise: border-boxDerzeit wird es vom IE nicht unterstützt

Unterstützung:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>

Wie abenson sagte, können Sie einen Umriss verwenden, aber ein Problem ist, dass Opera möglicherweise eine "nicht rechteckige Form" zeichnet. Eine andere Option, die zu funktionieren scheint, ist die Verwendung negativer Ränder, wie z. B. dieses CSS:

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

Mit diesem HTML:

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

Eine andere weniger saubere Option ist das Hinzufügen eines zusätzlichen Markups zum HTML. Sie legen beispielsweise die Breite eines äußeren Elements fest und fügen dem inneren den Rand hinzu. Das CSS:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

Und das HTML:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>

Verwenden Sie Polsterung, wenn kein Rand vorhanden ist. Entfernen Sie die Polsterung, wenn ein Rand vorhanden ist.

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

Ersetzen Sie im Wesentlichen einfach die 2px-Polsterung durch 2px-Ränder. Die Div-Größe bleibt gleich.

In Ihrem Fall können Sie es fummeln, indem Sie die Hälfte des Randes von der Polsterung abziehen? (-2,5 von der Polsterung Wenn Ihr Rand 5 Pixel breit ist, können Sie keine negative Polsterung haben. Wenn Sie also kleiner werden, verringern Sie die Gesamtbreite der Box.) Sie können dem Rand zusätzliche 2,5 Pixel hinzufügen, um die Gesamtgröße der Box beizubehalten.

Ich mag diesen Vorschlag wirklich nicht, aber ich glaube nicht, dass es einen Weg gibt, damit sauber umzugehen.

Sie versuchen also, das Gleiche wie den bekannten IE-Box-Modellfehler zu erreichen ? Das ist doch nicht möglich. Oder Sie möchten Clients nur mit IE unter Windows unterstützen und einen Doctype auswählen, der den IE in den Quirksmode zwingt .

Eine weitere Option, wenn Ihre Hintergrundfarbe fest ist:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}

Umriss: 3px festes Schwarz || Rand: 3px festes Schwarz

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}

<div>
hello world
</div>