Zwei Farbränder

Der Kunde wünscht sich zwei Farbränder für einen geprägten Look. Kann ich das an einem Element tun? Ich hatte gehofft, nicht zwei DOM-Elemente mit einzelnen Rändern zu stapeln.

Ja: Verwenden Sie die outlineEigenschaft; Es fungiert als zweite Grenze außerhalb Ihrer Grenze. Achtung, es kann auf wackelige Weise mit Rändern, Polstern und Schlagschatten interagieren. In einigen Browsern müssen Sie möglicherweise auch ein browserspezifisches Präfix verwenden. um sicherzustellen, dass es es aufgreift: -webkit-outlineund dergleichen (obwohl WebKit dies insbesondere nicht benötigt).

Dies kann auch nützlich sein, wenn Sie die Gliederung für bestimmte Browser verwerfen möchten (z. B. wenn Sie die Gliederung mit einem Schlagschatten kombinieren möchten; in WebKit befindet sich die Gliederung innerhalb des Schattens; in FireFox ist dies der Fall Dies -moz-outline: 0ist nützlich, um sicherzustellen, dass Sie keine knorrige Linie um Ihren schönen CSS-Schlagschatten erhalten.

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

Bearbeiten: Einige Leute haben bemerkt, dass outlinemit IE <8 nicht gut zusammenpasst. Während dies wahr ist; IE <8 zu unterstützen, ist wirklich nichts, was Sie tun sollten.

Das ist sehr gut möglich. Es dauert nur ein wenig CSS-Trick!

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<div class="border">Hi I have two border colors<br />I am also Fluid</div>

Ist es das, wonach du suchst?

Ein anderer Weg ist zu verwenden box-shadow:

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

Siehe Beispiel hier.

Haben Sie die verschiedenen Rahmenstile ausprobiert, die in der CSS-Spezifikation verfügbar sind? Es gibt bereits zwei Rahmenstile, die Ihren Anforderungen entsprechen könnten:

border-style: ridge;

Oder

border-style: groove;

Die Gliederung ist gut, aber nur, wenn Sie die Grenze ringsum haben möchten.

Sagen wir, wenn Sie es nur unten oder oben machen möchten, können Sie es verwenden

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

Und für den Boden:

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

Hoffe das hilft.

Anstatt nicht unterstützte und problematische Gliederungen zu verwenden, verwenden Sie einfach

• Hintergrundfarbe + Polsterung für den inneren Rand
• normaler Rand für den äußeren.

Beispiel:

HTML:

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS:

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

TEST (JSFiddle) :

img {
  padding: 1px;
  background: yellow;
  border: 1px solid black;
}

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

Wenn Sie mit "Prägen" zwei Ränder mit zwei verschiedenen Farben umeinander meinen, gibt es die outlineEigenschaft ( outline-left,outline-right ....), die jedoch in der IE-Familie schlecht unterstützt wird (dh IE6 und 7 unterstützen sie überhaupt nicht) ). Wenn Sie zwei Ränder benötigen, ist ein zweites Wrapper-Element in der Tat am besten.

Wenn Sie zwei Farben am selben Rand verwenden möchten. Verwenden Sie z

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

Auch hierfür gibt es spezielle border-styles( ridge, outsetund inset), die meiner Erfahrung nach jedoch von Browser zu Browser unterschiedlich sind.

Nicht möglich, aber Sie sollten überprüfen , um zu sehen , ob border-styleWerte wie inset, outsetoder eine andere, erreicht den gewünschten Effekt .. ( obwohl ich bezweifle es .. )

CSS3 hat die Grenzbildeigenschaften, aber ich weiß nicht , über die Unterstützung von Browsern noch (mehr Infos unter http://www.css3.info/preview/border-image/ ) ..

Einfach schreiben

style="border:medium double;"

für das HTML-Tag

Du könntest benutzen

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
 padding: 4px; outline: 1px solid green;
}

</style>

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-color:yellow;        
      }
    </style>

</head>
<body>
<a target="_blank" href="people.htm">
  <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
  </a>

</body>
</html>

Dies erzeugt einen schönen Effekt.

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>