programming css

Mũi tên trái và phải CSS

Thuộc tính CSS

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

2 đặt con trỏ chuột, nếu có, hiển thị khi con trỏ chuột ở trên một phần tử

Cài đặt con trỏ sẽ thông báo cho người dùng về các thao tác chuột có thể được thực hiện tại vị trí hiện tại, bao gồm. lựa chọn văn bản, kích hoạt menu trợ giúp hoặc ngữ cảnh, sao chép nội dung, thay đổi kích thước bảng, v.v. Bạn có thể chỉ định loại con trỏ bằng từ khóa hoặc tải một biểu tượng cụ thể để sử dụng [với hình ảnh dự phòng tùy chọn và từ khóa bắt buộc làm dự phòng cuối cùng]

Thử nó

cú pháp

/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url[hand.cur], pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor: url[cursor_1.png] 4 12, auto;
cursor: url[cursor_2.png] 2 2, pointer;

/* URLs and fallback URLs [some with coordinates], with mandatory keyword fallback */
cursor: url[cursor_1.svg] 4 5, url[cursor_2.svg], /* … ,*/ url[cursor_n.cur] 5 5,
  progress;

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

Thuộc tính

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

2 được chỉ định là 0 hoặc nhiều giá trị

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

4, được phân tách bằng dấu phẩy, theo sau là một giá trị từ khóa bắt buộc duy nhất. Mỗi

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

4 phải trỏ đến một tệp hình ảnh. Trình duyệt sẽ cố tải hình ảnh đầu tiên được chỉ định, quay lại hình ảnh tiếp theo nếu không thể và quay lại giá trị từ khóa nếu không thể tải hình ảnh nào [hoặc nếu không có hình ảnh nào được chỉ định]

Mỗi

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

4 có thể được tùy chọn theo sau bởi một cặp số được phân tách bằng dấu cách, đặt tọa độ

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

7 và

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

8 của điểm phát sóng của con trỏ so với góc trên cùng bên trái của hình ảnh

giá trị

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

4 Tùy chọn

Một

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

1 hoặc một danh sách được phân tách bằng dấu phẩy

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

2, trỏ đến một tệp hình ảnh. Có thể cung cấp nhiều hơn một

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

1 dưới dạng dự phòng, trong trường hợp một số loại hình ảnh con trỏ không được hỗ trợ. Dự phòng không phải URL [một hoặc nhiều giá trị từ khóa] phải ở cuối danh sách dự phòng

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

8 Tùy chọn

Các tọa độ x và y tùy chọn cho biết điểm nóng của con trỏ;

Các số được tính bằng đơn vị pixel hình ảnh. Chúng có liên quan đến góc trên cùng bên trái của hình ảnh, tương ứng với "

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

6" và được kẹp trong ranh giới của hình ảnh con trỏ. Nếu các giá trị này không được chỉ định, thì chúng có thể được đọc từ chính tệp đó và nếu không thì chúng sẽ được đặt mặc định ở góc trên cùng bên trái của hình ảnh

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

Giá trị từ khóa phải được chỉ định, cho biết loại con trỏ sẽ sử dụng hoặc con trỏ dự phòng sẽ sử dụng nếu tất cả các biểu tượng được chỉ định không tải được

Các từ khóa có sẵn được liệt kê trong bảng dưới đây. Khác với

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

8, có nghĩa là không có con trỏ, có một hình ảnh cho thấy cách các con trỏ được sử dụng để hiển thị. Bạn có thể di chuột qua các hàng của bảng để xem ảnh hưởng của các giá trị từ khóa con trỏ khác nhau trên trình duyệt của bạn ngay hôm nay

Danh mụcTừ khóaVí dụMô tảChung

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

9UA sẽ xác định con trỏ để hiển thị dựa trên ngữ cảnh hiện tại. e. g. , tương đương với

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url["hyper.cur"], auto;
}

0 khi hover văn bản.

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url["hyper.cur"], auto;
}

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url["hyper.cur"], auto;
}

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

29.

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

26.

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

28 và

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

41 giống như

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

42.

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

1 được tạo thành loại Hoạt hình tuyệt đốirời rạc

cú pháp chính thức

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

ghi chú sử dụng

Giới hạn kích thước biểu tượng

Mặc dù thông số kỹ thuật không giới hạn kích thước hình ảnh

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

2, nhưng tác nhân người dùng thường hạn chế chúng để tránh khả năng sử dụng sai mục đích. Ví dụ: trên Firefox và Chromium, hình ảnh con trỏ được giới hạn ở 128x128 pixel theo mặc định, nhưng bạn nên giới hạn kích thước hình ảnh con trỏ ở 32x32 pixel. Thay đổi con trỏ bằng cách sử dụng hình ảnh lớn hơn kích thước tối đa được hỗ trợ của tác nhân người dùng thường sẽ bị bỏ qua

Các định dạng tệp hình ảnh được hỗ trợ

Tác nhân người dùng được yêu cầu bởi thông số kỹ thuật để hỗ trợ các tệp PNG, SVG v1. 1 ở chế độ tĩnh an toàn chứa kích thước tự nhiên và bất kỳ định dạng tệp hình ảnh không hoạt ảnh nào khác mà chúng hỗ trợ cho hình ảnh ở các thuộc tính khác. Trình duyệt máy tính để bàn cũng hỗ trợ rộng rãi định dạng tệp

cursor = 
  [ [  |  ] [   ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

 = 
  url[  * ]  |
  src[  * ]

Thông số kỹ thuật chỉ ra thêm rằng các tác nhân người dùng cũng nên hỗ trợ SVG v1. 1 ở chế độ hoạt hình an toàn chứa kích thước tự nhiên, cùng với bất kỳ định dạng tệp hình ảnh động nào khác mà chúng hỗ trợ cho hình ảnh ở các thuộc tính khác. Tác nhân người dùng có thể hỗ trợ cả hình ảnh SVG tĩnh và động không chứa kích thước tự nhiên

Làm cách nào để thêm mũi tên trong CSS?

Cách tiếp cận. Tạo mũi tên bằng CSS rất đơn giản. Đầu tiên, tạo một hình chữ L [bảng chữ cái] bằng cách sử dụng thuộc tính box-shadow nào đó rồi xoay hình đó sang một góc nào đó để căn chỉnh chúng [cả mũi tên trái và phải] với nhau. HTML Code: In this section, two div elements are created, one for each arrow.

Làm cách nào để thêm mũi tên vào div trong CSS?

Trước tiên, bạn sẽ bắt đầu bằng cách sử dụng bộ chọn lớp giả,. sau đó. Bên trong bộ chọn, bạn cần đặt giá trị cho thuộc tính nội dung. Một chuỗi rỗng là tốt nếu bạn không có bất kỳ văn bản nào bạn muốn hiển thị. Sau đó, bạn phải đặt giá trị vị trí để mũi tên nằm ở đường viền dưới cùng mà bạn đã đặt cho div

Thử nó

cú pháp

giá trị

cú pháp chính thức

ghi chú sử dụng

Giới hạn kích thước biểu tượng

Các định dạng tệp hình ảnh được hỗ trợ

Làm cách nào để thêm mũi tên trong CSS?

Làm cách nào để thêm mũi tên vào div trong CSS?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề