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:
Title of the document
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
Center Horizontal Line
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:
Title of the document
hr {
width: 100%;
height: 30px;
margin-left: auto;
margin-right: auto;
background-color: #b7d0e2;
}
Horizontal Line with Height and Background Color
Đặ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:
Title of the document
hr {
width: 100%;
height: 30px;
margin-left: auto;
margin-right: auto;
background-color: #b7d0e2;
border: 0 none;
}
Horizontal Line with Height and Background Color
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:
Title of the document
hr {
border-top: 5px solid #095484;
}
Horizontal Line with Height and Background Color
Đ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:
Title of the document
.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;
}
Gradient Horizontal Line
Gradient Transparent
Single-direction Drop Shadow
Double
Dashed
Dotted
Rounded Corners
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:
Title of the document
.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;
}
Horizontal Lines with Images