Hướng dẫn bo viền css
Thuộc tính border-radius dùng để tạo góc bo tròn cho các phần tử, hình ảnh,..... Show
Cách tạo góc bo tròn cho phần tửMột phần tử luôn có bốn góc ở bốn vị trí như sau: top-left top-right bottom-left bottom-right Để tạo góc bo tròn cho phần tử dựa theo từng vị trí cụ thể, ta sử dụng cú pháp:
Độ bo tròn của góc có thể xác định theo đơn vị: px, em, hoặc %
Xem ví dụ Thuộc tính border-radius thường được sử dụng chung với thuộc tính border để tạo đường viền bo tròn
Xem ví dụ Cú pháp rút gọnThông thường, để bo tròn bốn góc cho một phần tử ta phải dùng đến bốn thuộc tính. Bây giờ, chỉ với một một thuộc tính border-radius ta có thế bo tròn cho cả bốn góc. Thuộc tính border-radius có bốn cách sử dụng:
Xem ví dụ Tạo góc hình elip
Xem ví dụ HAI BỐ CON NHÀ MÈO ĐANG ÔM NHAU NGỦ 1) Cách tạo đường viền cho một phần tử- Thông thường thì "đường viền" của một phần tử sẽ có ba đặc điểm chính : kiểu, độ dày, màu sắc (ví dụ như đường viền của phần tử phía trên có kiểu là double, độ dày 20 pixel, màu xanh lá cây) - Cho nên, khi muốn tạo đường viền cho một phần tử thì về cơ bản chúng ta cần phải thực hiện ba công việc như sau: (1) thiết lập kiểu đường viền cho phần tử, (2) thiết lập độ dày của đường viền, (3) xác định màu sắc của đường viền. 1.1) Thiết lập "kiểu đường viền" cho phần tử- Để thiết lập kiểu đường viền cho một phần tử thì chúng ta cần phải thiết lập thuộc tính border-style cho phần tử đó với cú pháp như sau:
- Trong đó, value có thể được xác định dựa theo một trong các giá trị bên dưới:
- Lưu ý: Khi tạo đường viền cho phần tử thì công việc xác định kiểu đường viền là quan trọng nhất, nếu ta không xác định kiểu đường viền hoặc thiết lập giá trị none thì đường viền sẽ không được hiển thị. 1.2) Thiết lập "độ dày" của đường viền- Để thiết lập độ dày của đường viền thì chúng ta sử dụng thuộc tính border-width với cú pháp như sau:
- Trong đó, value có thể được xác định dựa theo một trong các giá trị bên dưới:
1.3) Thiết lập "màu sắc" của đường viền- Thông thường thì đường viền của phần tử sẽ có màu trùng với màu của văn bản, nếu muốn thiết lập lại màu của đường viền thì chúng ta sử dụng thuộc tính border-color với cú pháp như sau:
- Trong đó, value có thể được xác định dựa theo một trong các giá trị bên dưới:
2) Thiết lập đường viền cho từng cạnh- Sau khi tìm hiểu xong phần hướng dẫn phía trên thì chắc các bạn cũng đã thấy: khi chúng ta tạo đường viền cho một phần tử thì mặc định cả bốn cạnh của đường viền sẽ có chung một định dạng - Tuy nhiên, không phải lúc nào người lập trình viên cũng muốn như thế, mà đôi khi họ muốn mỗi cạnh của đường viền có một định dạng khác nhau, và để làm được điều đó thì chúng ta có hai cách cơ bản như sau:
- Trước khi tìm hiểu chi tiết hai cách trên thì các bạn cần phải nắm rõ tên của từng cạnh: 2.1) Thiết lập nhiều giá trị cho thuộc tính
- Cạnh top của đường viền sẽ có kiểu value1. - Cạnh right của đường viền sẽ có kiểu value2. - Cạnh bottom của đường viền sẽ có kiểu value3. - Cạnh left của đường viền sẽ có kiểu value4.
- Cạnh top của đường viền sẽ có kiểu value1. - Cạnh left & right của đường viền sẽ có kiểu value2. - Cạnh bottom của đường viền sẽ có kiểu value3.
- Cạnh top & bottom của đường viền sẽ có kiểu value1. - Cạnh left & right của đường viền sẽ có kiểu value2. 2.2) Thêm tên cạnh vào bên trong tên thuộc tính- Để thiết lập đường viền cho riêng từng cạnh bằng cách thêm tên cạnh vào bên trong tên thuộc tính thì chúng ta sử dụng cú pháp như sau:
Xem ví dụ 3) Tạo đường viền cho phần tử (cú pháp rút gọn)- Trong phần hướng dẫn ở mục một, để tạo một cái đường viền cho phần tử thì chúng ta cần phải sử dụng đến ba thuộc tính: border-style border-width border-color. Trong phần này, tôi sẽ hướng dẫn các bạn rút gọn lại bằng cách sử dụng duy nhất mỗi thuộc tính border thôi. - Cú pháp:
- Trong đó:
- Lưu ý: Thuộc tính border không bắt buộc chúng ta phải gán cho nó đủ ba giá trị, những giá trị nào còn thiếu thì trình duyệt sẽ tự động áp dụng giá trị mặc định của thuộc tính tương ứng. - Ngoài ra, nếu muốn thiết lập đường viền cho riêng từng cạnh thì các bạn hãy thêm -têncạnh vào phía sau thuộc tính border.
Xem ví dụ |