Hướng dẫn can you add borders in css? - bạn có thể thêm đường viền trong css không?

Question

Thuộc tính Shorthand CSS của border đặt đường viền của một phần tử. Nó đặt các giá trị của border-width, border-style và border-color.border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color.

Nội dung chính Show

Thuộc tính cấu thành
Sự mô tả
Biên giới so với phác thảo
Định nghĩa chính thức
Cú pháp chính thức
Đặt biên giới đầu ra màu hồng
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Bạn có thể thêm 2 đường viền trong CSS không?
Thêm đường viền vào phần tử trong CSS là gì?
Tại sao biên giới không hoạt động CSS?
Bạn có thể điền vào một đường viền trong CSS?

Thử nó

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

Thuộc tính này là tốc ký cho các thuộc tính CSS sau:

border-color
border-style
border-width

Cú pháp

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;

Thuộc tính border có thể được chỉ định bằng cách sử dụng một, hai hoặc ba trong số các giá trị được liệt kê dưới đây. Thứ tự của các giá trị không quan trọng.

Lưu ý: Biên giới sẽ vô hình nếu phong cách của nó không được xác định. Điều này là do kiểu mặc định là

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       <line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

2. The border will be invisible if its style is not defined. This is because the style defaults to

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       <line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

2.

Giá trị

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       <line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

3

Đặt độ dày của đường viền. Mặc định là

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       <line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

4 nếu vắng mặt. Xem border-width.

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       <line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

6

Đặt phong cách của biên giới. Mặc định là

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       <line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

2 nếu vắng mặt. Xem border-style.

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       <line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

9

Đặt màu của đường viền. Mặc định là

<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>

0 nếu vắng mặt. Xem border-color.

Sự mô tả

Như với tất cả các thuộc tính tốc ký, bất kỳ giá trị phụ bị bỏ qua sẽ được đặt thành giá trị ban đầu của chúng. Điều quan trọng, border không thể được sử dụng để chỉ định giá trị tùy chỉnh cho

<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>

3, mà thay vào đó đặt nó thành giá trị ban đầu của nó, tức là,

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       <line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

2.

Nhiệm vụ của border đặc biệt hữu ích khi bạn muốn cả bốn biên giới đều giống nhau. Tuy nhiên, để làm cho chúng khác biệt với nhau, bạn có thể sử dụng các thuộc tính Longhand border-width, border-style và border-color, chấp nhận các giá trị khác nhau cho mỗi bên. Ngoài ra, bạn có thể nhắm mục tiêu một đường viền tại một thời điểm với các thuộc tính biên giới vật lý (

<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>

9) và logic (ví dụ:

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

0).

Biên giới so với phác thảo

Biên giới và phác thảo rất giống nhau. Tuy nhiên, các phác thảo khác với biên giới theo những cách sau:

Các phác thảo không bao giờ chiếm không gian, vì chúng được rút ra bên ngoài nội dung của một yếu tố.
Theo thông số kỹ thuật, các phác thảo không phải là hình chữ nhật, mặc dù chúng thường là như vậy.

Định nghĩa chính thức

Giá trị ban đầu	như mỗi thuộc tính của tốc ký: ____ 5: như mỗi thuộc tính của tốc ký: ________ 32: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 4 `border-width`: as each of the properties of the shorthand: `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 2: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 4 `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 4: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 4 `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 6: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 4 `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 8: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 4 `border-style`: như mỗi thuộc tính của tốc ký: ________ 41: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 `border`1: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 `border`3: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 `border`5: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 `border`7: border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 `border-color`: Như mỗi thuộc tính của tốc ký: ________ 50: `<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>` 0 `border-width`0: `<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>` 0 `border-width`2: `<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>` 0 `border-width`4: `<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>` 0 `border-width`6: `<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>` 0
Áp dụng cho	Tất cả các yếu tố. Nó cũng áp dụng cho `border-width`8.
Thừa hưởng	không
Giá trị tính toán	như mỗi tính chất của tốc ký: ________ 5: như mỗi thuộc tính của tốc ký: ________ 36: chiều dài tuyệt đối hoặc `border-style`1 nếu `border`5 là border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 hoặc `border-style`4 `border-width`: as each of the properties of the shorthand: `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 6: the absolute length or `border-style`1 if `border`5 is border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 or `border-style`4 `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 8: Độ dài tuyệt đối hoặc `border-style`1 nếu `border`7 là border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 hoặc `border-style`4 `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 4: Độ dài tuyệt đối hoặc `border-style`1 nếu `border`3 là border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 hoặc `border-style`4 `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 2: Độ dài tuyệt đối hoặc `border-style`1 nếu `border`1 là border = <line-width> \|\| <line-style> \|\| <color> <line-width> = <length [0,∞]> \| thin \| medium \| thick <line-style> = none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset 2 hoặc `border-style`4 `border-style`: Như mỗi thuộc tính của tốc ký: ________ 45: Theo quy định `border`5: as specified `border`7: Theo quy định `border`3: Theo quy định `border`1: theo quy định `border-color`: Như mỗi thuộc tính của tốc ký: ________ 54: Màu sắc được tính toán `border-width`4: computed color `border-width`6: màu tính toán `border-width`2: màu tính toán `border-width`0: màu tính toán
Loại hoạt hình	như mỗi thuộc tính của tốc ký: ________ 7: như mỗi thuộc tính của tốc ký: ________ 54: một màu `border-color`: as each of the properties of the shorthand: `border-width`4: a color `border-width`6: một màu `border-width`2: một màu `border-width`0: Một màu `border-style`: rời rạc `border-width`: Là mỗi thuộc tính của tốc ký: ________ 36: Một chiều dài `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 6: a length `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 8: Một chiều dài `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 4: chiều dài `div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }` 2: chiều dài

Cú pháp chính thức

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       <line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick
<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Ví dụ

Đặt biên giới đầu ra màu hồng

HTML

<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>

CSS

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

Kết quả

Thông số kỹ thuật

Sự chỉ rõ
Bối cảnh CSS và Biên giới Mô-đun Cấp 3 # Giới hạn PropDef # propdef-border

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

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Bạn có thể thêm 2 đường viền trong CSS không?

Giới thiệu về CSS nhiều biên giới. Nhiều đường viền trong CSS có thể được thực hiện bằng thuộc tính Box-Shadow. Nói chung, chúng ta có thể nhận được một đường viền duy nhất với thuộc tính biên giới. Thuộc tính Box-Shadow không dành cho nhiều biên giới, nhưng vẫn vậy, chúng tôi đang tạo ra nhiều đường viền với thuộc tính Box-Shadow.Multiple borders in CSS can be done by box-shadow property. Generally, we can get a single border with border property. Box-shadow property is not for multiple borders, but still, we are creating multiple borders with box-shadow property.

Thêm đường viền vào phần tử trong CSS là gì?

Thuộc tính tốc ký biên giới CSS đặt đường viền của một phần tử.Nó đặt các giá trị của chiều rộng biên giới, kiểu biên giới và màu biên.

Tại sao biên giới không hoạt động CSS?

Biên giới CSS không hiển thị nếu bạn đặt thuộc tính Biên giới tốc ký trong CSS và biên giới không hiển thị, vấn đề rất có thể là bạn không xác định kiểu biên giới.Trong khi các giá trị thuộc tính có chiều rộng biên giới và màu biên có thể được bỏ qua, thuộc tính kiểu biên giới phải được xác định.Nếu không, nó sẽ không kết xuất.you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.

Bạn có thể điền vào một đường viền trong CSS?

Các kiểu trong nền CSS và mô -đun Biên giới cho phép lấp đầy nền bằng màu hoặc hình ảnh (cắt hoặc thay đổi kích thước) hoặc sửa đổi chúng theo những cách khác.Những kiểu này cũng có thể trang trí đường viền với các đường hoặc hình ảnh, và làm cho chúng vuông hoặc tròn.(Ngoài ra, các hộp phần tử có thể được trang trí bằng một cái bóng.). These styles can also decorate borders with lines or images, and make them square or rounded. (Additionally, element boxes can be decorated with a shadow.)