Wie kann man das Rahmenbild stylen

Bilder mit Rahmen oder Frames verleihen dem Bild ein einflussreicheres Aussehen und unterscheiden sich von den anderen Inhalten auf der Seite.

Das Element <img> hat das Attribut border, welches nach HTML5 nicht mehr verwendet wird. Wir empfehlen daher, die CSS-Eigenschaft border zu verwenden.

Fügen Sie das Tag style zu Ihrem Element <img>, definieren Sie width und height und mithilfe der Eigenschaft border definieren Sie die Randbreite, seinen Stil und seine Farbe.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      width:650px;
      border:1px solid black;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Wie kann man das Randbild stylen

Um die Randfarbe zu ändern, können Sie die CSS-Eigenschaft color zu Ihrem Styling hinzufügen.

Wenn Sie einen doppelten Rand haben möchten, müssen Sie nur die Eigenschaft padding zum Stylen Ihres Bildes hinzufügen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      width:650px;
      padding:1px;
      border:1px solid #021a40;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für einen doppelten Rand</h2>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Es ist auch möglich, einen doppelten Rand mit unterschiedlicher Innenrandfarbe zu haben. Fügen Sie dazu die Eigenschaft background-color hinzu.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      width:650px;
      padding:5px;
      border:8px solid #999999;
      background-color: #e6e6e6;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Sie können die Grenzen auch separat angeben. Verwenden Sie dafür die CSS-Eigenschaften border-bottom, border-top, border-left und border-right und setzen Sie jeweils unterschiedliche Breitenwerte. Lassen Sie uns ein Beispiel sehen, wo die Eigenschaft border-bottom so eingestellt ist, dass sie wie ein Banner wirkt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      width: 225px;
      border: 8px solid #ccc;
      border-bottom: 130px solid #ccc;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" alt="Nature">
  </body>
</html>

Um Ihrem Bildrahmen ein Styling hinzuzufügen, fügen Sie die Eigenschaft border-style zum Element style hinzu.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      width:650px;
      padding:5px;
      border:12px #1c87c9;
      border-style: dashed;
      background-color: #eee;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Wie kann man jede Ecke spezifizieren und Kreisgrenzen haben

Um jede Ecke des Rahmens anzugeben, müssen Sie die CSS-Eigenschaft border-radius verwenden.

Die Eigenschaft border-radius kann ein bis vier Werte haben. Lassen Sie uns ein Beispiel mit vier Werten sehen:

Beachten Sie, dass der erste Wert für die linke obere Ecke, der zweite Wert für die rechte obere Ecke, der dritte Wert für die rechte untere Ecke und der vierte Wert für die linke untere Ecke gilt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      width:650px;
      padding:2px;
      border:3px solid #1c87c9;
      border-radius: 15px 50px 800px 5px;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Anstatt zu versuchen, das Bild in ein anderes Element zu schachteln oder jedes Bild in Photoshop zu bearbeiten, um einen korrekten Look für Ihren Bildrahmen zu erhalten, müssen Sie nur den Wert der Eigenschaft border-radius auf 50% oder 999em setzen. Stellen Sie die gleichen Werte für width und height ein.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.imageborder {
      border-radius: 999em;
      width: 350px;
      height: 350px;
      padding: 5px;
      line-height: 0;
      border: 10px solid #000;
      background-color: #eee;
      }
      img {
      border-radius: 999em;
      height: 100%;
      width: 100%;	
      margin: 0;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für einen Kreisrand</h2>
    <div class="imageborder">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" height="350" width="350" alt="iceland" />
    </div>
  </body>
</html>