Cương CSS

Phần tử này có viền đen và viền xanh dương, độ rộng 10px.

Cương CSS

Viền là một đường được vẽ xung quanh phần tử, bên ngoài viền, để làm nổi bật phần tử.

CSS có các thuộc tính viền sau:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Lưu ý:Viền vớiViềnKhác nhau! Khác nhau ở chỗ: viền được vẽ bên ngoài viền của phần tử và có thể chồng chéo với nội dung khác. Similar, viền cũng không phải là một phần của kích thước của phần tử; tổng chiều rộng và chiều cao của phần tử không bị ảnh hưởng bởi độ rộng của đường viền.

Phong cách viền CSS

Thuộc tính outline-style xác định phong cách viền và có thể thiết lập các giá trị sau:

  • dotted - Định nghĩa viền chấm.
  • dashed - Định nghĩa viền mờ.
  • solid - Định nghĩa viền đậm.
  • double - Định nghĩa viền đôi.
  • groove - Định nghĩa viền lõm rãnh 3D.
  • ridge - Định nghĩa viền nổi rãnh 3D.
  • inset - Định nghĩa viền lõm 3D.
  • outset - Định nghĩa viền nổi 3D.
  • none - Định nghĩa không viền.
  • hidden - Định nghĩa viền ẩn.

Dưới đây là các giá trị outline-style khác nhau:

Mẫu

Hiển thị các phong cách viền khác nhau:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Kết quả:

Đường viền chấm

Đường viền đứt

Đường viền thẳng

Đường viền đôi

Đường viền lõm 3D. Hiệu ứng này phụ thuộc vào giá trị outline-color.

Đường viền rãnh 3D. Hiệu ứng này phụ thuộc vào giá trị outline-color.

Đường viền lõm 3D. Hiệu ứng này phụ thuộc vào giá trị outline-color.

Đường viền góc cạnh 3D. Hiệu ứng này phụ thuộc vào giá trị outline-color.

Thử ngay

Lưu ý:Trừ khi đã được thiết lập outline-style Thuộc tính, nếu không các thuộc tính đường viền khác (sẽ được giải thích chi tiết trong chương tiếp theo) sẽ không có bất kỳ tác dụng nào!