Đường viền CSS
Thuộc tính đường viền CSS cho phép bạn chỉ định kiểu, chiều rộng và màu sắc của đường viền của một phần tử.
Tôi có biên giới ở tất cả các bên.
Tôi có một đường viền dưới cùng màu đỏ.
Tôi có đường viền tròn.
Kiểu viền CSS
Thuộc border-style
tính chỉ định loại đường viền để hiển thị.
Các giá trị sau được phép:
dotted
- Xác định một đường viền chấmdashed
- Xác định đường viền đứt nétsolid
- Xác định một đường viền chắc chắndouble
- Xác định đường viền képgroove
- Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viềnridge
- Xác định đường viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viềninset
- Xác định đường viền in 3D. Hiệu ứng phụ thuộc vào giá trị màu viềnoutset
- Xác định đường viền ban đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viềnnone
- Xác định không có đường viềnhidden
- Xác định một đường viền ẩn
Thuộc border-style
tính có thể có từ một đến bốn giá trị (cho đường viền trên cùng, đường viền bên phải, đường viền dưới cùng và đường viền bên trái).
Thí dụ
Trình diễn các kiểu đường viền khác nhau:
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Kết quả:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Lưu ý: Không có thuộc tính đường viền CSS KHÁC nào (mà bạn sẽ tìm hiểu thêm trong các chương tiếp theo) sẽ có BẤT KỲ hiệu ứng nào trừ khi thuộc
border-style
tính được đặt!