Gói thiết kế website Thiết kế website công ty Thiết kế website du lịch Thiết kế website bán hàng Thiết kế website bất động sản Thiết kế website nhà hàng Thiết kế website xây dựng Thiết kế website thuê xe ôtô Thiết kế website nội thất Thiết kế website trọn gói Thiết kế website sim số đẹp, bán sim online
Dịch vụ khác Nâng cấp website Quản trị website Thiết kế giao diện website Đăng tin rao vặt Thiết kế Logo Quảng cáo Google Ads hiệu quả
Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho các thẻ HTML
Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho các thẻ HTML như
Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là:
01Thuộc tính màu của đường viền
Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính border-color:
div.color { border-color: #CC0000; }02Đặt chiều rộng cho đường viền (border)
Nếu muốn đặt chiều rộng của đường viền chúng ta sẽ đặt giá trị cho thuộc tính border-width:
div.borerwidth { border-width: 2px; }STT | Giá trị |
---|---|
1 | thin |
2 | medium |
3 | thick |
4 | length |
03Chọn kiểu của đường viền
Bạn có thể sử dụng thuộc tính border-style để đặt kiểu cho đường viền. Chúng ta có thể gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác nhau.
div.borderstyle { border-style: solid; }STT | border-style |
---|---|
1 | none |
2 | hidden |
3 | dotted |
4 | dashed |
5 | solid |
6 | double |
7 | groove |
8 | ridge |
9 | inset |
10 | outset |
Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng:
Ứng với đường viền của mỗi phía chúng ta đều có 3 giá trị (color, width, style)
STT | Phía | Thuộc tính |
---|---|---|
1 | top | border-top-color: border-top-width: border-top-style: |
2 | right | border-right-color: border-right-width: border-right-style: |
3 | bottom | border-bottom-color: border-bottom-width: border-bottom-style: |
4 | left | border-left-color: border-left-width: border-left-style: |
Chúng ta có thể dùng phương pháp viết mã giản lược (shorthand) để viết các thuộc tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border của thẻ
div.border { border: 1px solid #CC0000; }
Tag: Thiết kế web , thiết kế website
Tổng đài tư vấn miễn phí 100% cho khách hàng Tam Nguyên.
Hãy gọi cho chúng tôi!