Cú pháp cho kích thước của đường viền trong CSS là gì?

Các thuộc tính viền CSS được sử dụng để chỉ định kiểu, màu sắc và kích thước của đường viền của một phần tử. Các thuộc tính đường viền CSS được đưa ra dưới đây

• kiểu viền
• màu viền
• chiều rộng biên giới
• bán kính đường viền

1) Kiểu viền CSS

Thuộc tính Border style được sử dụng để chỉ định kiểu đường viền mà bạn muốn hiển thị trên trang web

Có một số giá trị kiểu đường viền được sử dụng với thuộc tính kiểu đường viền để xác định đường viền

ValueDescriptionnoneNó không xác định bất kỳ đường viền nào. dottedIt được sử dụng để xác định đường viền chấm chấm. dashedNó được sử dụng để xác định đường viền nét đứt. solidIt được sử dụng để xác định một đường viền rắn. doubleIt xác định hai đường viền có cùng giá trị độ rộng đường viền. rãnhNó xác định đường viền có rãnh 3d. hiệu ứng được tạo theo giá trị màu viền. ridgeIt xác định đường viền có gờ 3d. hiệu ứng được tạo theo giá trị màu viền. insetIt xác định đường viền chèn 3d. hiệu ứng được tạo theo giá trị màu viền. đầuNó xác định đường viền đầu 3d. hiệu ứng được tạo theo giá trị màu viền. Kiểm tra nó ngay bây giờ

đầu ra

không biên giới

Đường viền chấm

Đường viền nét đứt

Biên giới vững chắc

Đường viền đôi

Đường viền rãnh

Một đường viền sườn núi

Một đường viền chèn

Đường viền ban đầu

Một đường viền ẩn

2) Độ rộng đường viền CSS

Thuộc tính độ rộng đường viền được sử dụng để thiết lập độ rộng của đường viền. Nó được đặt bằng pixel. Bạn cũng có thể sử dụng một trong ba giá trị được xác định trước, mỏng, trung bình hoặc dày để đặt độ rộng của đường viền

Ghi chú. Thuộc tính độ rộng đường viền không được sử dụng một mình. Nó luôn được sử dụng với các thuộc tính đường viền khác như thuộc tính "kiểu đường viền" để đặt đường viền trước nếu không nó sẽ không hoạt động

Kiểm tra nó ngay bây giờ

3) Màu đường viền CSS

Có ba phương pháp để đặt màu của đường viền

• Tên. Nó chỉ định tên màu. Ví dụ. "màu đỏ"
• RGB. Nó chỉ định giá trị RGB của màu. Ví dụ. "rgb(255,0,0)"
• lục giác. Nó chỉ định giá trị hex của màu. Ví dụ. "#ff0000"

Ngoài ra còn có một màu đường viền có tên là "trong suốt". Nếu màu đường viền không được đặt, nó sẽ được kế thừa từ thuộc tính màu của phần tử

Bạn có thể cung cấp cho bất kỳ phần tử nào "các góc bo tròn" bằng cách áp dụng một

border-radius: {1,4} [ / {1,4} ]?

0 thông qua CSS. Bạn sẽ chỉ nhận thấy nếu có sự thay đổi màu sắc liên quan. Chẳng hạn, nếu phần tử có màu nền hoặc đường viền khác với phần tử ở trên

.element {
  border-radius: 10px;
}

 

 

thuộc tính cấu thành

border-radius: {1,4} [ / {1,4} ]?

0 là cái mà chúng tôi gọi là thuộc tính "tốc ký". Điều đó có nghĩa là nó đặt các thuộc tính riêng lẻ sau trong một khai báo

• border-radius: {1,4} [ / {1,4} ]?

  2

• border-radius: {1,4} [ / {1,4} ]?

  3

• border-radius: {1,4} [ / {1,4} ]?

  4

• border-radius: {1,4} [ / {1,4} ]?

  5

thuộc tính logic

Chúng được gọi là thuộc tính “vật lý” vì chúng đặt bán kính theo vị trí vật lý của góc (e. g. trên cùng bên trái). Nhưng

border-radius: {1,4} [ / {1,4} ]?

0 là một phần của đặc tả Giá trị và Thuộc tính logic, có nghĩa là nó có các thuộc tính vật lý tương đương logic

Physical propertyLogical property

border-radius: {1,4} [ / {1,4} ]?

2

border-radius: {1,4} [ / {1,4} ]?

8

border-radius: {1,4} [ / {1,4} ]?

3

.element {
  border-radius: 10px;
}

10

border-radius: {1,4} [ / {1,4} ]?

5

.element {
  border-radius: 10px;
}

12

border-radius: {1,4} [ / {1,4} ]?

4

.element {
  border-radius: 10px;
}

14

Lúc đầu, nó hơi khó hiểu, nhưng thứ tự thực sự quan trọng, đặc biệt là khi làm việc với

border-radius: {1,4} [ / {1,4} ]?

0 như một cách viết tắt. Thứ tự diễn ra như thế này, trong đó hướng đầu tiên đề cập đến hướng khối và hướng thứ hai đề cập đến hướng nội tuyến

Physical propertyLogical property

.element {
  border-radius: 10px;
}

16

.element {
  border-radius: 10px;
}

17

.element {
  border-radius: 10px;
}

18

.element {
  border-radius: 10px;
}

19

border-radius: {1,4} [ / {1,4} ]?

10

border-radius: {1,4} [ / {1,4} ]?

11

border-radius: {1,4} [ / {1,4} ]?

12

border-radius: {1,4} [ / {1,4} ]?

13

cú pháp

border-radius: {1,4} [ / {1,4} ]?

• Giá trị ban đầu.

  border-radius: {1,4} [ / {1,4} ]?

  14
• Áp dụng đối với. tất cả các yếu tố
• Thừa hưởng. không
• Giá trị tính toán. cặp giá trị được tính toán
• hoạt hình. theo giá trị tính toán

Thuộc tính

border-radius: {1,4} [ / {1,4} ]?

0 nhận từ một đến bốn giá trị độ dài hoặc tỷ lệ phần trăm, trong đó một giá trị đặt bán kính cho cả bốn góc cùng một lúc, trong khi bốn giá trị đặt từng góc riêng lẻ

.element {
  border-radius: 10px;
}

1

Vì vậy, nếu chúng ta muốn đặt một bán kính khác ở trên cùng bên trái và dưới cùng bên phải nhưng áp dụng cùng một bán kính ở trên cùng bên phải và dưới cùng bên trái, chúng ta có thể sử dụng cú pháp ba giá trị

border-radius: {1,4} [ / {1,4} ]?

1

 

 

Làm tròn hình elip (______216)

Bạn cũng có thể chỉ định các bán kính trong đó góc được làm tròn bởi. Nói cách khác, hình tròn không nhất thiết phải là hình tròn hoàn hảo, nó có thể là hình elip. Điều này được thực hiện bằng cách sử dụng dấu gạch chéo (

border-radius: {1,4} [ / {1,4} ]?

16) giữa hai giá trị

border-radius: {1,4} [ / {1,4} ]?

2

 

 

Ghi chú. Firefox chỉ hỗ trợ đường viền hình elip trong 3. 5+. Các trình duyệt WebKit cũ hơn (e. g. Safari 4 trở xuống) đối xử không đúng với

border-radius: {1,4} [ / {1,4} ]?

18 giống như

border-radius: {1,4} [ / {1,4} ]?

19

giá trị

Thuộc tính

border-radius: {1,4} [ / {1,4} ]?

0 có thể chấp nhận mọi đơn vị độ dài CSS hợp lệ. Điều đó có nghĩa là mọi thứ từ

border-radius: {1,4} [ / {1,4} ]?

21,

border-radius: {1,4} [ / {1,4} ]?

22,

border-radius: {1,4} [ / {1,4} ]?

23,

border-radius: {1,4} [ / {1,4} ]?

24,

border-radius: {1,4} [ / {1,4} ]?

25,

border-radius: {1,4} [ / {1,4} ]?

26, và nhiều thứ khác nữa đều công bằng

Bạn có thể chỉ định giá trị của

border-radius: {1,4} [ / {1,4} ]?

0 theo tỷ lệ phần trăm. Điều này đặc biệt hữu ích để tạo hình tròn hoặc hình elip, nhưng có thể được sử dụng bất cứ lúc nào bạn muốn

border-radius: {1,4} [ / {1,4} ]?

0 tương quan trực tiếp với chiều rộng của phần tử

border-radius: {1,4} [ / {1,4} ]?

4

 

 

Ghi chú. Trong Safari, giá trị phần trăm cho

border-radius: {1,4} [ / {1,4} ]?

0 chỉ được hỗ trợ trong 5. 1+. Trong Opera, chỉ được hỗ trợ trong 11. 5+

Gotchas

Có một số điều cần lưu ý khi làm việc với tài sản

border-radius: {1,4} [ / {1,4} ]?

0

Ảnh nền đã cắt

Nếu phần tử có nền hình ảnh, nó sẽ được cắt bớt ở góc tròn một cách tự nhiên

border-radius: {1,4} [ / {1,4} ]?

7

Chảy màu nền

Đôi khi bạn có thể thấy một "rò rỉ"

border-radius: {1,4} [ / {1,4} ]?

41 bên ngoài đường viền khi có mặt của

border-radius: {1,4} [ / {1,4} ]?

0 (đây là một ví dụ hoàn hảo). Để ngăn chặn điều này, bạn sử dụng thuộc tính CSS

border-radius: {1,4} [ / {1,4} ]?

43

border-radius: {1,4} [ / {1,4} ]?

1

Bán kính đường viền chồng chéo

Jay Sitter đã đề cập đến những gì xảy ra khi giá trị của một góc bán kính lớn đến mức nó chồng lên bán kính của một góc khác. Giống như ví dụ này, nơi chúng ta sẽ tạo hình dạng "viên thuốc" ở bên phải với ít làm tròn hơn ở bên trái

Dự phòng nhúng CodePen

Chúng tôi đang chuyển đổi bán kính của

border-radius: {1,4} [ / {1,4} ]?

44 ở các góc trên cùng bên trái và dưới cùng bên trái, vậy tại sao chúng lại có hình hộp như vậy? . Jay tìm hiểu sâu về toán học đằng sau điều này và cách ngăn chặn điều đó xảy ra, vì vậy bạn nên đọc bài viết của anh ấy để biết thêm ngữ cảnh

Thử nghiệm

Dự phòng nhúng CodePen

hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari4*3*9123.1*

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari108< . 1*1072.1*3. 2*

Bây giờ không cần thiết, nhưng để hỗ trợ trình duyệt tốt nhất có thể, bạn có thể đặt trước thuộc tính bằng

border-radius: {1,4} [ / {1,4} ]?

46 và

border-radius: {1,4} [ / {1,4} ]?

47 để đảm bảo các trình duyệt cũ có thể tham gia vui vẻ

border-radius: {1,4} [ / {1,4} ]?

6

Lưu ý thứ tự của các thuộc tính đó. tiền tố của nhà cung cấp được liệt kê đầu tiên và phiên bản "spec" không có tiền tố được liệt kê cuối cùng. Đây là cách chính xác để làm điều đó. Bán kính đường viền là một ví dụ đặc biệt tốt về lý do tại sao chúng tôi làm theo cách đó. Trong phiên bản phức tạp hơn một chút của việc sử dụng

border-radius: {1,4} [ / {1,4} ]?

0 (trong đó bạn chuyển hai giá trị thay vì một), tiền tố nhà cung cấp

border-radius: {1,4} [ / {1,4} ]?

46 cũ hơn sẽ thực hiện điều gì đó hoàn toàn khác so với phiên bản “thông số kỹ thuật”. Vì vậy, nếu chúng ta sao chép và dán một cách mù quáng các giá trị giống nhau vào cả ba thuộc tính, chúng ta có thể thấy các kết quả khác nhau trên nhiều trình duyệt. Để có tính nhất quán lâu dài nhất, tốt nhất bạn nên liệt kê phiên bản “thông số kỹ thuật” cuối cùng

Ngày nay, việc bỏ tiền tố và chỉ sử dụng vanilla

border-radius: {1,4} [ / {1,4} ]?

0 là khá thực tế, như đã thảo luận tại đây

Đây là từng thuộc tính riêng lẻ, với tiền tố của nhà cung cấp

border-radius: {1,4} [ / {1,4} ]?

0

Mỗi giá trị này cũng có thể có một giá trị được phân tách bằng dấu cách, chẳng hạn như

border-radius: {1,4} [ / {1,4} ]?

71, giá trị này hoạt động giống như một giá trị được phân tách bằng dấu gạch chéo trong tốc ký (

border-radius: {1,4} [ / {1,4} ]?

72

border-radius: {1,4} [ / {1,4} ]?

73

border-radius: {1,4} [ / {1,4} ]?

74)

Cú pháp chính xác của thuộc tính đường viền trong CSS là gì?

Cú pháp của thẻ viền là gì?

Kích thước hộp CSS là gì?