Làm cách nào để thêm đường viền đôi với các màu khác nhau?
Để thêm đường viền kép trên bất kỳ hình dạng nào bằng CSS, “ :trước ” bộ chọn nổi tiếng. Nó thay đổi màu sắc của cả hai đường viền để làm cho chúng trở nên độc đáo. Quy trình từng bước được cung cấp bên dưới để thêm đường viền kép với các màu khác nhau:
Bước 1: Thêm phần tử Div và chỉ định các lớp
Trong tệp HTML, hãy thêm phần tử div bên trong thẻ
và gán dấu “ lớp học ” với tên là “ hai đường viền ”. Người dùng cũng có thể tạo tên lớp của riêng mình:< div lớp học = 'hai biên giới' >
< / div >
Bước 2: Tạo thẻ kiểu
Trong bước này, hãy tạo một phần cho lớp “ hai đường viền ” và tạo thành một bản sao với phần “ :trước ' bộ chọn. Theo cách này, các thuộc tính CSS sẽ được áp dụng cho các lớp của chúng ta:
< phong cách >
.gấp đôi- ranh giới {
}
.gấp đôi- ranh giới :trước {
}
< / phong cách >
Bước 3: Thêm kiểu vào lớp
Các thuộc tính CSS áp dụng cho phần tử div có lớp “ hai đường viền ”. Các phong cách sau đây được đề cập dưới đây:
.gấp đôi- ranh giới {
lý lịch- màu sắc : #ccc;
ranh giới : 4px màu xanh cố định;
phần đệm: 50px;
chiều rộng : 16px;
chiều cao : 16px;
vị trí: tương đối;
lề: 0 tự động;
}
Mô tả các thuộc tính CSS được đưa ra dưới đây:
- Đầu tiên, thêm “ màu nền ” có màu xám và “ ranh giới ” có trọng lượng 4px và màu xanh lục.
- Các ' đệm ” của 50px để tạo không gian bên trong 50px từ mọi phía.
- Cuối cùng, “ chiều rộng ' Và ' chiều cao' của 16px. Ngoài ra, “ lề ” là 0 auto có nghĩa là lề trên và dưới sẽ bằng 0 và còn lại.
Trang web trông như thế này:
Đầu ra hiển thị rằng đường viền được áp dụng cho “div”.
Bước 4: Thêm CSS Selector
Bây giờ, di chuyển tới ô thứ hai trong thẻ kiểu có “ :trước ” bộ chọn được đính kèm và viết mã bên dưới:
.gấp đôi- ranh giới :trước {lý lịch : không có;
ranh giới : 4px màu xanh cố định;
nội dung : '' ;
vị trí: tuyệt đối;
trên cùng: 4px;
trái: 4px;
phải: 4px;
dưới cùng: 4px;
}
Các thuộc tính được giải thích dưới đây:
- Sử dụng ' chức vụ ” để cố định vị trí của một phần tử.
- Sau đó, “ trên, trái, phải và dưới ” xác định lề của mục mới được tạo từ mục gốc.
- Bộ chọn CSS có tên là “: trước ” thêm nội dung vào trước phần tử đã chọn.
Đầu ra trông giống như:
Đó là cách có thể thêm đường viền kép bằng cách sử dụng các màu khác nhau.
Phần kết luận
Để thêm một đường viền kép, trước tiên hãy tạo một phần tử div và gán nó cho một lớp. Sau đó, thêm CSS “ chức vụ ” thuộc tính phải được đặt thành tương đối. Sau đó, thêm CSS Selector “:before” vào nó để người dùng có thể thêm nội dung trước phần tử đã chọn. Hướng dẫn này đã minh họa cách sử dụng đường viền kép với nhiều màu sắc khác nhau.