CSS – Border( Viền )

0
24

CSS Thuộc tính đường viền (Border Properties )

Thuộc tính CSS cho phép bạn chỉ định kiểu, chiều rộng và màu sắc của đường viền của phần tử.

Kiểu viền CSS

border-stylequy định cụ thể sở hữu những loại viền để hiển thị.

Các giá trị sau:

  • dotted – Xác định một đường viền chấm
  • dashed – Xác định đường viền đứt nét
  • solid – Xác định đường viền chắc chắn
  • double – Xác định đường viền kép
  • groove– Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • ridge– Xác định đường viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • inset– Xác định đường viền in 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • outset– Xác định đường viền ban đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • none – Xác định không có đường viền
  • hidden – Xác định một đường viền ẩn

border-style có thể có từ một đến bốn giá trị (biên trên , biên phải, biên dưới, và biên trái).

Ví dụ:

Trình diễn các kiểu đường viền khác nhau:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Kết quả là :

Lưu ý: Không có thuộc tính đường viền CSS KHÁC nào trừ khi thuộc border-style được đặt!

CSS Chiều rộng đường viền (Border width)

border-width quy định độ rộng của bốn cạnh.

Chiều rộng có thể được đặt thành một kích thước cụ thể (tính bằng px, pt, cm, em, v.v.) hoặc bằng cách sử dụng một trong ba giá trị được xác định trước: thin, medium, thick:

Ví dụ:

Minh họa các độ rộng đường viền khác nhau:

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

Kết quả như sau :

Độ rộng cạnh cụ thể (Specific Side Widths)

border-width có thể có từ một đến bốn giá trị:

Thí dụ:

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px trên và dưới, 20px ở hai bên */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px trên và dưới, 5px ở hai bên */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px trên, 10px phải, 4px dưới và 35px trái */
}

CSS Màu viền (Border Color)

border-color sử dụng để thiết lập màu sắc của bốn biên giới.

Màu có thể được đặt bằng:

  • tên – chỉ định tên màu, như “đỏ”
  • HEX – chỉ định một giá trị HEX, như “# ff0000”
  • RGB – chỉ định một giá trị RGB, như “rgb (255,0,0)”
  • HSL – chỉ định một giá trị HSL, như “hsl (0, 100%, 50%)”
  • trong suốt

Lưu ý: Nếu border-colorkhông được đặt, nó sẽ kế thừa màu của phần tử.

Thí dụ

Trình diễn các màu viền khác nhau:

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

Màu viền với giá trị cụ thể (Specific Side Colors)

border-color có thể có từ một đến bốn giá trị trên dưới trái phải.

Ví dụ:

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red trên, green phảo, blue dưới and yellow trái */
}

Giá trị HEX

Màu của đường viền cũng có thể được chỉ định bằng cách sử dụng giá trị thập lục phân (HEX):

Ví dụ:

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

Giá trị RGB

Hoặc bằng cách sử dụng các giá trị RGB:

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

Giá trị HSL

Bạn cũng có thể sử dụng các giá trị HSL:

Ví dụ:

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

CSS Kiểu Đường Viền (Border Sides )

Ví dụ:

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Kết quả là:

Ví dụ trên cho kết quả tương tự như sau:

Ví dụ:

p {
  border-style: dotted solid;
}

Vì vậy, đây là cách nó hoạt động:

Nếu thuộc tính border-style có bốn giá trị:

  • kiểu đường viền: nét đứt đôi liền nét;
    • đường viền trên cùng được chấm
    • biên giới bên phải là rắn
    • đường viền dưới là đôi
    • đường viền bên trái được gạch ngang

Nếu thuộc tính border-style có ba giá trị:

  • kiểu viền: đôi liền nét chấm;
    • đường viền trên cùng được chấm
    • biên giới bên phải và bên trái là chắc chắn
    • đường viền dưới là đôi

Nếu thuộc tính border-stylecó hai giá trị:

  • kiểu viền: nét liền mảnh;
    • đường viền trên và dưới được chấm
    • biên giới bên phải và bên trái là chắc chắn

Nếu thuộc tính border-style có một giá trị:

  • border-style: dotted;
    • tất cả bốn đường viền được chấm

Ví dụ:

/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}

Thuộc tính viết tắt của đường viền (Shorthand)

Giống như bạn đã thấy ở trang trước, có nhiều thuộc tính cần xem xét khi xử lý đường viền.

Để rút ngắn code, cũng có thể chỉ định tất cả các thuộc tính đường viền riêng lẻ trong một thuộc tính.

border viết tắt cho các thuộc tính biên giới cá nhân sau đây:

  • border-width
  • border-style
  • border-color

Ví dụ:

p {
  border: 5px solid red;
}

Viền trái  (Border-left) :

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

Tương tự như viền trái là phải, trên và dưới tương ứn với right,left vaf bottom.

Viền tròn (Border-radius)

border-radius được sử dụng để thêm khung viền tròn :

Ví dụ:

p {
  border: 2px solid red;
  border-radius: 5px;
}

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây