Đây là ví dụ về định dạng đường viền [Biên giới]
Đây là ví dụ về định dạng đường viền [Biên giới]
Đây là ví dụ về định dạng đường viền [Border]
Tôi . Các thuộc tính cơ bản của đường viền [Đường viền]
1. màu viền
- Thuộc tính border-color dùng để chỉ định màu sắc cho đường viền
- Giá trị của thuộc tính có thể là mã màu hoặc một từ tiếng Anh
- Ví dụ. màu viền. #000000 hoặc màu viền. đen
2. Chiều rộng biên giới
- Sử dụng thuộc tính border-width để chỉ định độ dày cho đường viền
- Giá trị của thuộc tính được tính theo đơn vị đo như px, em, pt, cm
- Ví dụ. chiều rộng biên giới. 5px
3. Kiểu viền
- Sử dụng thuộc tính border-style để chỉ định dạng định dạng cho đường viền, như nét ngang, liền kề, nét kép
- Giá trị của thuộc tính bao gồm.
noneKhông có đường viềnhiddenĐường viền bị ẩn đisolid
Đường viền các kiểu liền kề thông thường
tiêu tanĐường viền kiểu đối xứng
say mêĐường viền kiểu chấm
gấp đôidual border
rãnhCác loại đường bao của sector
cây rơmĐường viền kiểu màn hình lên
chèn vàoInset kiểu đường viền
khởi đầuĐường viền kiểu khởi đầu
ban đầuUse default value of it. Thông thường sẽ là không có
inheritKế thừa giá trị của phần tử html chaLưu ý. Khi đặt thuộc tính cho đường bao là không có hoặc ẩn thì người xem đều không nhìn thấy đường bao. Nhưng không có là không có, còn ẩn vẫn là có đường viền nên vẫn chiếm diện tích, độ dày càng lớn thì khoảng trống càng lớn
II. Cách khai báo định dạng đường viền kiểu tốc ký
Thay vì phải khai báo từng thuộc tính một dòng, bạn có thể viết rút gọn lại
Cú pháp. đường viền. giá trị1 giá trị2 giá trị3;
Ví dụ. ranh giới. rắn #009999 8px;
III. Định dạng đường viền theo từng cạnh
Trong thực tế không phải lúc nào cũng định dạng 4 đường viền như nhau mà chúng ta có thể định dạng mỗi đường viền theo một kiểu, tương ứng với các vị trí. Trên cùng [trên];
1. Cách mạng báo cơ bản
Chúng ta sẽ khai báo theo vị trí của từng cận cảnh. Cú pháp là. đường viền-vị trí-thuộc tính. value;
Ví dụ.
div{
ranh giới. 6px màu đỏ đặc;
màu viền trên cùng. xanh vàng;
}
Kết quả.
2. Cách viết tắt kiểu báo cáo [viết tắt]
Cú pháp 1. kiểu đường viền. value1 value2 value3 value4;- Ví dụ.
______0
- Kết quả
Cư pháp 2. kiểu đường viền. giá trị1 giá trị2 giá trị3;
div{ border-style:dotted solid double; }- Đường viền phía trên có kiểu dotted
- Đường viền bên trái và bên phải có kiểu solid
- Đường viền phía dưới có kiểu double
Cư pháp 3. kiểu đường viền. value1 value2;
div{
border-style:dotted solid;
}
- Đường viền phía trên và dưới có kiểu dotted
- Đường viền bên trái và bên phải có kiểu solid
IV. Thuộc tính bán kính đường viền
Thuộc tính bán kính đường viền được bổ sung vào CSS 3, bán kính có nghĩa là bán kính. Thuộc tính này có tác dụng bẻ cong 4 góc của đường bao.