Wie kann man eine horizontale Linie erstellen

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .hr1 {
      border: 0;
      height: 3px;
      background: #095484;
      background-image: linear-gradient(to right, #ccc, #095484, #ccc);
      }
      .hr2 {
      border: 0;
      height: 3px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(9, 84, 132), rgba(0, 0, 0, 0));
      }
      .hr3 {
      height: 15px;
      border: 0;
      box-shadow: inset 0 12px 12px -12px rgba(9, 84, 132);
      }
      .hr4 {
      border-top: 3px double #095484;
      }
      .hr5 {
      background-color: #fff;
      border-top: 2px dashed #095484;
      }
      .hr6 {
      border-top: 3px dotted #095484;
      }
      .hr7 {
      height: 30px; 
      border-style: solid; 
      border-color: #095484; 
      border-width: 1px 0 0 0; 
      border-radius: 20px; 
      }
      .hr8 {
      display: block; 
      content: ""; 
      height: 30px; 
      margin-top: -31px; 
      border-style: solid; 
      border-color: #095484; 
      border-width: 0 0 1px 0; 
      border-radius: 20px; 
      }
    </style>
  </head>
  <body>
    <h3>Gradiente Horizontale Linie</h3>
    <hr class="hr1" />
    <h3>
    Gradient Transparent
    <h3>
    <hr class="hr2" />
    <h3>
    Einseitig gerichteter Schlagschatten
    <h3>
    <hr class="hr3" />
    <h3>Doppelt</h3>
    <hr class="hr4" />
    <h3>Gestrichelt</h3>
    <hr class="hr5" />
    <h3>Gepunktet</h3>
    <hr class=""hr6" />
    <h3>Abgerundete Ecken</h3>
    <hr class="hr7" />
    <hr class="hr8" />
  </body>
</html>