Tạo viền cho chữ trong HTML

Chào mọi người ! Hôm nay mình sẽ biết tut nho nhỏ về thêm 1 cách nữa giúp chúng ta căn Text chữ vào vị trí trung tâm của 1 line hay border nằm ngang đơn giản bằng CSS Flexbox nhé. Cái này hay dùng ở chỗ làm Header của 1 block hay tiêu đề của nội dung khi biết cách làm dễ như thế này chúng ta có thể viết và tùy biến nó dễ dàng theo mong muốn.

Cách làm

HTML
HTML chỉ cần đơn giản thế này

<div class="text-divider">Make Awesome Things That Matterdiv>

CSS
CSS chúng ta sẽ làm như sau

.text-divider {
  display: flex;
  align-items: center;
  --text-divider-gap: 1rem;
}
.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: #333;
  flex-grow: 1;
}
.text-divider::before {
  margin-right: var(--text-divider-gap);
}
.text-divider::after {
  margin-left: var(--text-divider-gap);
}

Cái var(--text-divider-gap) là cái biến chúng ta define trước để căng margin giữa text bên trái vs bên phải so với border nhé. Để margin 1rem thì sẽ được như Demo bên dưới nhé.

Sử dụng các thuộc tính đường viền như kiểu đường viền, màu đường viền và chiều rộng đường viền, trình tạo CSS đường viền

⇢Không có đường chấm ẩn nào có rãnh gấp đôi bên trong có chấm
⇢Chọn cạnh tất cả các cạnh cạnh trái, cạnh phải, cạnh trên, cạnh dưới

Phần sau là kiến ​​thức lý thuyết về CSS border (đường viền)

Tóm Ý hide

1 Đường viền đường viền CSS

2 chiều rộng đường viền, màu đường viền, kiểu đường viền

3 Cạnh viền

Đường viền đường viền CSS

Để thêm đường viền vào một phần tử HTML, bạn sử dụng thuộc tính CSS có tên là đường viền, giá trị của thuộc tính này bạn viết trên một dòng đại diện cho thuộc tính đường viền mong muốn, ba giá trị trong số đó là màu kiểu kích thước, trong đó:

kích thước độ dày đường viền (như 1px, 2em …) kiểu đường viền kiểu, nó nhận các giá trị như không có, ẩn, chấm, đứt nét, đặc, kép, rãnh, rãnh, in chìm, đầu tiên hoặc sử dụng kiểu chấm – đường chấm, đường ngưỡng đứt nét, mã màu đường viền liền nét liền mảnh (xem mã màu trong HTML, CSS) hoặc các tên màu như đỏ, xanh lam, xanh lục, đen, trắng, xanh nước biển, nâu, vàng …

Khi mã CSS tạo đường dày 2 pixel, kiểu đường liền nét liền mạch, màu đường đỏ, thì bạn viết:

viền: 2 điểm ảnh đặc màu đỏ;

Ví dụ: tạo một lớp CSS có tên là boderexam1 mô tả từ, độ dày của dòng là 5 pixel, dòng có kiểu chấm chấm và màu là xanh lục.

ví dụ biên giới

Các kết quả:

ví dụ biên giới

Trong cú pháp phác thảo

viền: kích thước kiểu màu;

Bạn có thể khai báo các phần tử còn thiếu, lần này nó sẽ sử dụng giá trị mặc định, ví dụ trong các trường hợp sau:

Border CSS Code Đường viền kết quả: nút; Không đặt đường viền: dấu gạch ngang # b1154a;

Kích thước bị thiếu, vì vậy kích thước được mặc định

đường viền: 1px gạch ngang;

Thiếu màu, vì vậy hãy lấy màu mặc định

chiều rộng đường viền, màu đường viền, kiểu đường viền

Ngoài cách viết đường viền dựa trên thuộc tính border như trên, bạn cũng có thể sử dụng ba thuộc tính border-width, border-style, border-color để chỉ định chiều rộng, kiểu đường và màu sắc.

Chiều rộng dòng là giá trị tính bằng px, em …

Bạn đang xem: Tạo đường viền cho văn bản html

Màu sắc là màu theo quy tắc CSS như màu theo tên, màu băm, màu RGB, rgba

Kiểu dòng nhận các giá trị: không có, chấm, chấm, kép, rãnh, rãnh, chèn, bắt đầu, ẩn

Ví dụ:

Không có giám sát.

Phong cách chấm bi.

Phong cách chấm bi.

Nhấn đúp.

Loại rãnh.

loại sọc.

Loại chèn.

Phong cách bắt đầu.

Ẩn dòng khung (khung không được vẽ nhưng chiều rộng phần tử vẫn có khung).

Không có giám sát.

Phong cách chấm bi.

Phong cách chấm bi.

Nhấn đúp.

Loại rãnh.

Xem Thêm: Bí Quyết Kinh Doanh Tốt – 6 Điều Khó Làm Nếu Muốn Giàu Có

loại sọc.

Loại chèn.

Phong cách bắt đầu.

Ẩn dòng khung (khung không được vẽ nhưng chiều rộng phần tử vẫn có khung).

Cạnh viền

Cách viết trên ảnh hưởng đến tất cả bốn cảnh của hộp, nếu bạn muốn xác định từng cạnh của hộp, bạn có thể sử dụng các thuộc tính bổ sung.

Đặt chiều rộng, kiểu đường kẻ, thuộc tính màu: đường viền trên cùng, đường viền bên phải, đường viền dưới cùng, đường viền bên trái

Ví dụ bao gồm đường viền trên và dưới

Ví dụ bao gồm đường viền trên và dưới

Tương tự như màu đường viền, chiều rộng đường viền, kiểu thân, bạn cũng đặt từng màu, chiều rộng và kiểu đường riêng biệt cho từng cạnh, với các thuộc tính

left-border-width-left-border-style-left-border-style-top-border-width-top-border-style-top-border-color-viền-rộng-viền-phải-phong cách-viền-phải-màu sắc dưới cùng-đường viền đường viền-dưới cùng-kiểu đường viền-dưới cùng-màu