Hướng dẫn how do i change the position of a horizontal line in css? - làm cách nào để thay đổi vị trí của một đường ngang trong css?

Một quy tắc ngang thường được sử dụng làm bộ chia nội dung hoặc phần. Như một quy tắc ngang, phần tử được sử dụng. Ban đầu phần tử được tạo kiểu bằng các thuộc tính. Ngày nay, trong HTML5, phần tử nói với trình duyệt rằng có một sự phá vỡ theo chủ đề cấp đoạn. Hãy cùng xem cách tạo kiểu cho phần tử với CSS dưới đây.

Phần tử được tạo kiểu với các quy tắc CSS thay vì các thuộc tính. Thay đổi chiều rộng của đường ngang bằng cách đặt thuộc tính chiều rộng và sau đó tập trung nó bằng thuộc tính lề.

Ví dụ về việc thay đổi chiều rộng và vị trí của một quy tắc ngang:

html>
<html>
  <head>
    <title>Title of the documenttitle>
    <style>
      hr {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
      }
    style>
  head>
  <body>
    <h2>Center Horizontal Lineh2>
    <hr />
  body>
html>

Kết quả

Nếu bạn muốn thay đổi độ dày, hoặc chiều cao của đường ngang của bạn, hãy thêm thuộc tính chiều cao vào phong cách của bạn. Trong trường hợp này, bạn cũng có thể đặt thuộc tính màu nền cho đường ngang dày.

Ví dụ về việc thay đổi chiều cao và màu nền của quy tắc ngang:

html>
<html>
  <head>
    <title>Title of the documenttitle>
    <style>
      hr {
        width: 100%;
        height: 30px;
        margin-left: auto;
        margin-right: auto;
        background-color: #b7d0e2;
      }
    style>
  head>
  <body>
    <h2>Horizontal Line with Height and Background Colorh2>
    <hr />
  body>
html>

Đặt thuộc tính viền thành "Không" để loại bỏ đường viền của đường ngang dày của bạn.

Ví dụ về việc thêm một quy tắc ngang mà không có đường viền:

html>
<html>
  <head>
    <title>Title of the documenttitle>
    <style>
      hr {
        width: 100%;
        height: 30px;
        margin-left: auto;
        margin-right: auto;
        background-color: #b7d0e2;
        border: 0 none;
      }
    style>
  head>
  <body>
    <h2>Horizontal Line with Height and Background Colorh2>
    <hr />
  body>
html>

Bạn có thể thay đổi màu của đường ngang bằng cách đặt thuộc tính Border-Top và xác định màu. Thực hiện theo ví dụ để xem một minh họa của nó.

Ví dụ về việc thêm một đường ngang với thuộc tính Border-Top:

html>
<html>
  <head>
    <title>Title of the documenttitle>
    <style>
      hr {
        border-top: 5px solid #095484;
      }
    style>
  head>
  <body>
    <h2>Horizontal Line with Height and Background Colorh2>
    <hr />
  body>
html>

Đi xa hơn với các đường ngang bằng cách đưa ra các kiểu khác nhau cho đường viền phần tử của bạn. Kiểm tra mã ví dụ để xem những dòng ngang tuyệt đẹp được trình bày.

Ví dụ về việc thêm các kiểu khác nhau vào các dòng ngang:

html>
<html>
  <head>
    <title>Title of the documenttitle>
    <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>Gradient Horizontal Lineh3>
    <hr class="hr1" />
    <h3>Gradient Transparenth3>
    <hr class="hr2" />
    <h3>Single-direction Drop Shadowh3>
    <hr class="hr3" />
    <h3>Doubleh3>
    <hr class="hr4" />
    <h3>Dashedh3>
    <hr class="hr5" />
    <h3>Dottedh3>
    <hr class="hr6" />
    <h3>Rounded Cornersh3>
    <hr class="hr7" />
    <hr class="hr8" />
  body>
html>

Nếu bạn muốn đặt một vật trang trí hoặc hình ảnh làm quy tắc ngang cho trang web của mình, bạn có thể thêm hình ảnh nền vào quy tắc ngang của bạn với sự trợ giúp của thuộc tính nền CSS. Ngoài ra, đặt chiều cao bằng chiều cao của hình ảnh của bạn (hoặc bao nhiêu phần bạn muốn từ hình ảnh) và đường viền: Không có, vì hình ảnh của bạn sẽ trông giống như một đường ngang.

Ví dụ về việc thêm hình nền làm đường ngang:

html>
<html>
  <head>
    <title>Title of the documenttitle>
    <style>
      .hr1 {
        height: 25px;
        background: url(/uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg) no-repeat center;
        border: none;
      }
      .hr2 {
        height: 25px;
        background: url(/uploads/media/default/0001/01/295e26d0bdf4d635c8887a6b0f37b61d7c69c5fc.png) no-repeat center;
        border: none;
      }
      .hr3 {
        height: 25px;
        background: url(/uploads/media/default/0001/01/09a69b0ad1525926a508356955843cf84306fd85.png) no-repeat center;
        border: none;
      }
      .hr4 {
        height: 20px;
        background: url(/uploads/media/default/0001/01/12fbe0b5b3d06c7e379d646068faa12f70452638.png) no-repeat center;
        border: none;
      }
      .hr5 {
        height: 50px;
        background: url(/uploads/media/default/0001/01/7d5f2a204567da4df1c1d7e5017d7b510ef56619.jpeg) no-repeat center;
        border: none;
      }
      .hr6 {
        height: 70px;
        background: url(/uploads/media/default/0001/01/fb69fe21cc880d96b3267efaa88cd72288a77fef.png) no-repeat center;
        border: none;
      }
    style>
  head>
  <body>
    <h2>Horizontal Lines with Imagesh2>
    <hr class="hr1" />
    <br />
    <hr class="hr2" />
    <br />
    <hr class="hr3" />
    <br />
    <hr class="hr4" />
    <br />
    <hr class="hr5" />
    <hr class="hr6" />
  body>
html>