Làm thế nào để Thêm biên giới trong HTML5 và CSS3 Lập trình - núm vú

Bạn có thể sử dụng CSS3 để vẽ đường viền xung quanh bất kỳ phần tử HTML5 nào. Bạn có một số quyền tự do trong kích thước, phong cách, và màu sắc biên giới. Dưới đây là hai cách để xác định thuộc tính của đường biên: sử dụng các thuộc tính border cá nhân, và sử dụng một phím tắt. Biên giới không thực sự thay đổi cách bố trí, nhưng chúng làm tăng sự tách biệt hình ảnh có thể hấp dẫn, đặc biệt là khi bố cục của bạn phức tạp hơn.

Cách sử dụng thuộc tính border

Đây là một trang có một đường viền đơn giản được vẽ quanh tiêu đề.

Mã cho các phần biên giới. trang html thể hiện các nguyên tắc cơ bản của đường biên trong CSS:

borderProps. html h1 {border-color: red; chiều rộng biên giới:. 25; border-style: double;}

Điều này có một đường viền

Mỗi phần tử có thể có đường viền được xác định. Biên giới yêu cầu ba thuộc tính:

• chiều rộng : Chiều rộng đường viền. Điều này có thể được đo bằng bất kỳ đơn vị CSS, nhưng chiều rộng biên giới thường được mô tả bằng pixel hoặc ems. ( Ghi nhớ: em chiều rộng gần chữ hoa "M" trong phông chữ hiện tại.)

• màu : Màu được sử dụng để hiển thị biên giới. Màu sắc có thể được định nghĩa như bất kỳ màu nào khác trong CSS, với tên màu hoặc giá trị hex.

• style : CSS hỗ trợ một số kiểu đường viền. Ví dụ minh hoạ một đường viền đôi. Điều này rút ra một biên giới với hai đường mỏng hơn xung quanh phần tử.

Bạn phải xác định tất cả ba thuộc tính nếu bạn muốn đường viền xuất hiện đúng. Bạn không thể dựa vào các giá trị mặc định để hoạt động trong tất cả các trình duyệt.

Làm thế nào để xác định các kiểu đường biên

CSS có một danh sách được xác định trước về phong cách đường biên bạn có thể chọn. Đây là một trang có tất cả các kiểu đường biên chính được hiển thị.

Bạn có thể chọn bất kỳ kiểu nào cho bất kỳ đường viền nào:

• Solid: Một đường nét đơn nhất xung quanh phần tử.

• Đôi: Hai đường xung quanh phần tử với một khoảng cách giữa chúng. Chiều rộng đường viền là chiều rộng kết hợp của cả hai đường và khoảng cách.

• Groove: Sử dụng bóng để mô phỏng một rãnh khắc trên trang.

• Ridge: Sử dụng bóng để mô phỏng một sườn núi được vẽ trên trang.

• Inset: Sử dụng bóng để mô phỏng nút nhấn.

• Khởi đầu: Sử dụng che để mô phỏng một nút dán từ trang.

• Xoay ngang: Đường đứt giữa phần tử.

• Dotted: Một đường chấm chấm xung quanh phần tử.

Cách sử dụng phím tắt biên giới

Xác định ba thuộc tính CSS khác nhau cho mỗi đường biên là một chút buồn tẻ. May mắn thay, CSS bao gồm một đường viền dễ sử dụng để biên giới dễ dàng xác định.

Bạn không thể nói sự khác biệt từ đầu ra, nhưng mã cho borderShortcut. html rất đơn giản:

borderShortcut. html h1 {border: red 5px solid;}

Trang này sử dụng phím tắt biên giới

Thứ tự mà bạn mô tả thuộc tính border không quan trọng. Chỉ cần chỉ định một màu sắc, kích thước, và một phong cách biên giới.

Làm thế nào để tạo biên giới một phần

Nếu bạn muốn, bạn có thể kiểm soát chính xác hơn về mỗi bên của một đường biên. Có một số lối tắt biên giới chuyên biệt cho từng tiểu vùng.

Trang này áp dụng một kiểu đường biên ở cuối tiêu đề cũng như các đường viền khác nhau ở trên, bên dưới và bên cạnh các đoạn văn. Đường biên một phần khá dễ dàng để xây dựng, như bạn có thể thấy từ danh sách mã:

subBorders. html h1 {border-bottom: 5px màu đen đôi;} p {border-left: 3px đen chấm; đường viền phải: 3px chấm đen; border-top: 3px đen đứt; border-bottom: rãnh màu đen 3px;}

Nhóm này có một đường viền dưới
Các đoạn có một vài đường viền được xác định.
Đoạn có nhiều đường viền được xác định.

Thông báo các kiểu đường biên: border-top, border-bottom, border-left, và border-right. Mỗi kiểu này hoạt động như lối tắt biên giới, nhưng nó chỉ hoạt động ở một phía của biên giới.

Ngoài ra còn có các thuộc tính biên giới cụ thể cho mỗi bên (ví dụ như chiều rộng biên dưới cùng điều chỉnh chiều rộng của đường viền dưới) nhưng hầu như không bao giờ được sử dụng bởi vì phiên bản tắt rất dễ dàng hơn.