CSS trên cùng đường viền

Kiếm thu nhập bằng kỹ năng CSS của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn
Chúng tôi đang xây dựng thị trường làm việc tự do tự phục vụ lớn nhất cho những người như bạn

Chiều rộng của đường viền trên cùng, cũng như tất cả các cạnh khác của đường viền, có thể được xác định bằng các thuộc tính tốc ký của đường viền hoặc độ rộng đường viền

Để đặt chiều rộng trên cùng của đường viền, trước tiên bạn nên xác định thuộc tính kiểu đường viền, vì bạn cần có đường viền trước khi đặt chiều rộng của nó. Bạn có thể sử dụng kiểu viền hoặc kiểu viền trên cùng để chỉ định kiểu của đường viền

Thông số kỹ thuật không xác định độ dày chính xác của từng từ khóa. Tuy nhiên, chúng luôn có thứ tự như sau. mỏng ≤ vừa ≤ dày

Thuộc tính border-top-style được sử dụng trong CSS và một số phần tử HTML nhất định. Nó được sử dụng để đặt kiểu đường kẻ cho mặt trên của đường viền của phần tử. Để đặt loại đường cho cả bốn cạnh, hãy sử dụng border-style. Để đặt loại đường riêng cho các cạnh khác, hãy sử dụng border-right-style, border-bottom-style hoặc border-left-style

giá trị

• none - Không biên giới;
• hidden - Giống như none, ngoại trừ về giải quyết xung đột biên giới đối với các yếu tố bảng

• h1 {
      border-top:medium solid white;
  }
  

  0 - Chuỗi gạch ngang ngắn hoặc đoạn thẳng.

• h1 {
      border-top:medium solid white;
  }
  

  1 - Chuỗi dấu chấm.

• h1 {
      border-top:medium solid white;
  }
  

  2 - Hai đường thẳng có tổng số điểm ảnh được xác định là

  h1 {
      border-top:medium solid white;
  }
  

  3.

• h1 {
      border-top:medium solid white;
  }
  

  4 - Hiệu ứng chạm khắc.

• h1 {
      border-top:medium solid white;
  }
  

  5 - Làm cho hộp xuất hiện dưới dạng nhúng.

• h1 {
      border-top:medium solid white;
  }
  

  6 - Ngược lại với

  h1 {
      border-top:medium solid white;
  }
  

  5. Làm cho hộp xuất hiện 3D (dập nổi).

• h1 {
      border-top:medium solid white;
  }
  

  8 - Ngược lại với

  h1 {
      border-top:medium solid white;
  }
  

  4. Đường viền xuất hiện ở dạng 3D (sắp ra mắt).

• border-top-style0 - Đường đơn, thẳng, nét liền.

ví dụ HTML

<span style="border-top:medium solid white;">TEXT</span>

ví dụ CSS

h1 {
    border-top:medium solid white;
}

Đường viền trên cùng, kết hợp với đường viền bên phải, dưới cùng và bên trái, cũng có thể được chỉ định bằng thuộc tính tốc ký border

Những giá trị khả thi

Một danh sách được phân tách bằng dấu cách, chứa tối đa ba giá trị đại diện cho border-top-width, border-top-style và border-top-color. Mọi giá trị bị loại trừ sẽ mặc định là giá trị ban đầu của chúng

Thuộc tính CSS border-top xác định chiều rộng, kiểu đường và màu của đường viền trên cùng của hộp. Nó là một thuộc tính tốc ký để thiết lập các thuộc tính CSS của border-top-width, border-top-style và border-top-color

cú pháp

Cú pháp cho thuộc tính CSS trên cùng của đường viền là

border-top: border-top-width border-top-style border-top-color;

Tham số hoặc Đối số

border-top-width là chiều rộng đường viền trên cùng của một hộp và có thể là một trong các giá trị sau
(Nếu không cung cấp độ rộng trên cùng của đường viền, giá trị mặc định là trung bình)

Giá trịMô tảcố địnhGiá trị cố định được biểu thị bằng px, em,
div { đường viền trên cùng. 2px;
div { đường viền trên cùng. gầy;
div { đường viền trên cùng. trung bình;
div { đường viền trên cùng. đặc;

border-top-style là kiểu đường của đường viền trên cùng của hộp và có thể là một trong các kiểu sau
(Nếu không cung cấp kiểu viền trên cùng, thì mặc định là không có)

ValueDescriptionnoneKhông có viền trên cùng (Đây là mặc định)
div { đường viền trên cùng. phi;
div { đường viền trên cùng. chất rắn;
div { đường viền trên cùng. say mê;
div { đường viền trên cùng. nét đứt;
div { đường viền trên cùng. gấp đôi;
div { đường viền trên cùng. rãnh;
div { đường viền trên cùng. cây rơm;
div { đường viền trên cùng. hình nhỏ;
div { đường viền trên cùng. khởi đầu;
div { đường viền trên cùng. ẩn giấu;
div { đường viền trên cùng. thừa kế;

border-top-color là màu của đường viền trên cùng của hộp và có thể là một trong các màu sau

ValueDescrip#RRGGGBB Biểu thị thập lục phân của màu trên cùng của đường viền
div { đường viền trên cùng. #FF0000;
div { đường viền trên cùng. rgb(255,0,0); . đỏ, xanh, đen, trắng)
div { đường viền trên cùng. màu đỏ;
div { đường viền trên cùng. trong suốt;
div { đường viền trên cùng. thừa kế;

Ghi chú

• Khi sử dụng thuộc tính border-top, bạn có thể cung cấp một hoặc tất cả các giá trị (giá trị độ rộng của đường viền, kiểu đường viền và chiều rộng của đường viền) và chúng có thể được cung cấp theo bất kỳ thứ tự nào
• Bạn phải cung cấp một giá trị cho kiểu viền trên cùng để đường viền trên cùng xuất hiện
• Xem thêm thuộc tính border-top-color, border-top-style và border-top-width
• Cần chuyển đổi giá trị màu của bạn sang một đại diện khác?

tính tương thích của trình duyệt web

Thuộc tính CSS border-top có hỗ trợ cơ bản với các trình duyệt sau

• Trình duyệt Chrome
• Android
• Firefox (Tắc kè)
• Firefox Di động (Tắc kè)
• Internet Explorer (IE)
• điện thoại IE
• Ô-pê-ra
• Opera di động
• Safari (WebKit)
• Safari di động

Thí dụ

Chúng ta sẽ thảo luận về thuộc tính border-top bên dưới, khám phá các ví dụ về cách sử dụng thuộc tính này trong CSS

Ví dụ

div { border-top: solid; }

Trong ví dụ CSS border-top này, chúng ta đã đặt border-top-width thành 2px, border-top-style thành solid và border-top-color thành red

Đường viền trên cùng có nghĩa là gì trong CSS?

Màu trên cùng của đường viền trong CSS là gì?