Có rất nhiều kỹ thuật được sử dụng để tạo một vòng kết nối trong CSS. Trong đoạn mã của chúng tôi, bạn có thể tìm thấy một số kỹ thuật được sử dụng rộng rãi và hỗ trợ trình duyệt tốt.

Bạn đang xem : cách tạo vòng kết nối trong css

Có nhiều kỹ thuật được sử dụng để tạo vòng kết nối. Trong đoạn mã của chúng tôi, chúng tôi sẽ trình bày một số ví dụ với thuộc tính CSS border-radius , cũng như với HTML & lt; canvas & gt; SVG & lt; circle & gt ; phần tử.

Cách phổ biến nhất là sử dụng thuộc tính bán kính đường viền. Chúng tôi chỉ cần đặt thuộc tính bán kính đường viền thành 50% trên phần tử cần thiết để tạo các góc cong.

Như bạn đã nhận thấy, việc này khá dễ dàng. Bây giờ, hãy bắt đầu với việc tạo HTML .

Tạo HTML

  • Sử dụng hai phần tử & lt; div & gt; và thêm các lớp vào chúng.
  & lt; div class = "circleBase circle1" & gt; & lt; / div & gt;
& lt; div class = "circleBase circle2" & gt; & lt; / div & gt;  

Thêm CSS

  • Đặt bán kính đường viền thành 50% cho “.circleBase”.
  • Đặt các thuộc tính width , height , background border cho các thuộc tính “circle1” và “circle2 “các lớp riêng biệt.
  

. circleBase

{

border-radius

:

50%

; }

. circle1

{

width

:

100px

;

height

:

100px

;

background

:

# 4bc475

;

border

:

1px

solid

# 000

; }

. circle2

{

width

:

150px

;

height

:

150px

;

background

:

# a1a1a1

;

border

:

1px

solid

# 000

; }

Bây giờ bạn có thể xem ví dụ đầy đủ.

Ví dụ về cách tạo vòng kết nối bằng cách sử dụng & lt; div & gt; các phần tử:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. circleBase

{

border-radius

:

50%

; }

. circle1

{

width

:

100px

;

height

:

100px

;

background

:

# 4bc475

;

border

:

1px

solid

# 000

; }

. circle2

{

width

:

150px

;

height

:

150px

;

background

:

# a1a1a1

;

border

:

1px

solid

# 000

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" circleBase circle1 "

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" circleBase circle2 "

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Phương pháp mà chúng tôi đã sử dụng trong ví dụ trên là phương pháp đơn giản nhất và có hỗ trợ trình duyệt tốt.

Bây giờ, hãy xem một ví dụ, trong đó chúng tôi sử dụng các phần tử & lt; span & gt; trong & lt; div & gt ;. Tại đây, chúng tôi cũng chỉ định display là “inline-block” và thêm thuộc tính text-align được đặt thành “center” vào & lt; div & gt; để căn các vòng tròn vào tâm.

Ví dụ về cách tạo vòng kết nối bằng cách sử dụng & lt; span & gt; các phần tử:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. circle

{

height

:

25px

;

width

:

25px

;

background-color

:

# bbb

;

border-radius

:

50%

;

display

: inline-block; }

div

{

text-align

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

& lt;

h1

& gt;

Vòng kết nối

& lt; /

h1

& gt;

& lt;

span

class

=

" circle "

& gt;

& lt; /

span

& gt;

& lt;

span

class

=

" circle "

& gt;

& lt; /

span

& gt;

& lt;

span

class

=

" circle "

& gt;

& lt; /

span

& gt;

& lt;

span

class

=

" circle "

& gt;

& lt; /

span

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Trong ví dụ tiếp theo, chúng tôi tạo một vòng tròn & lt; div & gt; và đặt một văn bản bên trong nó.

Ví dụ về cách tạo một vòng kết nối có văn bản bên trong:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

# circle

{

background

:

# cfcfcf

;

width

:

128px

;

height

:

128px

;

border-radius

:

64px

;

border

:

2px

solid

# 000

; }

# circle

div

{

vị trí

: tương đối;

left

:

19px

;

top

:

19px

;

width

:

90px

;

height

:

90px

;

color

:

# 000

;

text-align

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

id

=

" circle "

& gt;

& lt;

div

& gt;

Ví dụ về div tròn

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Trong ví dụ sau, chúng tôi tạo một vòng kết nối thích ứng. Ở đây, chúng tôi đặt phần trăm chiều rộng và bán kính đường viền cho vùng chứa. Sau đó, chúng tôi thêm một khối trống padding-bottom vào phần tử giả : after . Do đó, chúng ta có thể có cùng một kết quả là tạo một vùng chứa có chiều rộng và chiều cao bằng nhau.

Ví dụ về cách tạo một vòng kết nối đáp ứng:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. rescircle

{

width

:

20%

;

border-radius

:

50%

;

background

:

# b5b5b5

; }

. rescircle

: sau { nội dung:

""

;

display

: block;

padding-bottom

:

100%

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" rescircle "

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về cách tạo vòng kết nối với SVG & lt ; vòng tròn & gt; phần tử:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

svg

height

=

" 150 "

width

=

" 150 "

& gt;

& lt;

circle

cx

=

" 60 "

cy

=

" 60 "

r

=

" 50 "

stroke

=

" blue "

stroke-width

=

" 2 "

lấp đầy

=

" lightblue "

/ & gt;

& lt; /

svg

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về cách tạo một vòng kết nối bằng HTML & lt ; canvas & gt; phần tử:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

canvas

id

=

" canvas "

width

=

" 300 "

height

=

" 100 "

& gt;

& lt; /

canvas

& gt;

& lt;

script

& gt;

var

canvas =

document

.getElementById (

'canvas' );

var

context = canvas.getContext (

'2d'

);

var

centerX = canvas.width /

2

;

var

centerY = canvas.height /

2

;

var

radius =

40

; context.beginPath (); context.arc (centerX, centerY, radius,

0

,

2

*

Toán học

.PI,

false

); context.fillStyle =

'lightgreen'

; context.fill (); context.lineWidth =

2

; context.strokeStyle =

"xanh"

; context.stroke ();

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ngoài ra, hãy thử tạo các vòng tròn và các hình dạng hình học khác bằng công cụ của chúng tôi có tên là Hình ảnh Hình học .


Xem thêm những thông tin liên quan đến chủ đề cách tạo vòng kết nối trong css

Những cách làm center phổ biến trong CSS mà bạn nên biết

  • Tác giả: evondev
  • Ngày đăng: 2022-01-25
  • Đánh giá: 4 ⭐ ( 7428 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 👉 Những cách làm center phổ biến trong CSS mà bạn nên biết

    —— Tham khảo các khóa học của mình:
    🔥 Khoá học HTML CSS cơ bản: https://evondev.com/khoa-hoc-html-css
    🔥 Khóa học HTML CSS nâng cao: https://evondev.com/khoa-hoc-huong-dan-cat-psd
    🔥 Khóa học Javascript cơ bản đến nâng cao: https://evondev.com/khoa-hoc-javascript-co-ban

    —— Kết nối với mình
    🤝 Fanpage: https://www.facebook.com/evondevblog/
    🤝 Facebook: https://www.facebook.com/tuan.trananh.0509
    🤝 Blog: https://evondev.com
    🤝 Group: https://www.facebook.com/groups/2565163230401512
    🤝 Tiktok: https://tiktok.com/@evon.dev

    —— Source code
    💻 Github: https://github.com/evondev/youtube

    —— Ủng hộ mình làm videos nha
    🙏 Donate: https://evondev.com/donate/

Vòng kết nối tiến trình CSS [đã đóng]

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 4612 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Tôi đã tạo một hướng dẫn về cách thực hiện chính xác điều đó với CSS3…

KẾT NỐI FILE CSS VÀO FILE HTML

  • Tác giả: viettamduc.com
  • Đánh giá: 4 ⭐ ( 2861 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: KẾT NỐI FILE CSS VÀO FILE HTML

Tạo vòng bo text với CSS

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 7737 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML Để làm được thì chúng ta sẽ cần 1 wrapper element để bao bọc lấy element đối tượng. Vì vậy mình sẽ sử dụng blockquote element làm element con và dùng thẻ div để làm wrapper.

Văn bản vòng tròn với CSS và JavaScript

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 7055 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, tôi sẽ chia sẻ mã CSS và JS để tạo văn bản vòng kết nối từ một phần tử văn bản HTML. Kỹ thuật này tạo một phần tử span cho mỗi chữ cái và xoay nó một chút. Bạn có thể tạo…

Tạo một vòng kết nối hoàn hảo với CSS

  • Tác giả: vie.renalweb.org
  • Đánh giá: 5 ⭐ ( 9254 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Còn các bạn thì sao, mình mới làm quen với chủ đề CSS. Tôi đang cố gắng thực hiện hiệu ứng xung như bạn có thể thấy trong hình ảnh này. Tôi muốn biểu tượng menu của mình (biểu tượng bên cạnh từ “Trang chủ”) có hình ảnh động tương tự …

Hiệu ứng tạo bóng vùng giao diện box-shadow trong CSS

  • Tác giả: www.dammio.com
  • Đánh giá: 3 ⭐ ( 8794 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Flutter là gì? Nó có ưu điểm vượt trội ra sao để làm một ứng dụng mobile? - device là gì

By ads_php