Empat cara mudah untuk melukis segi empat tepat di html-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Empat cara mudah untuk melukis segi empat tepat di html

尊渡假赌尊渡假赌尊渡假赌

Feb 09, 2025 am 10:46 AM

Four Simple Ways to Draw a Rectangle in HTML

Artikel ini akan memperkenalkan empat kaedah asas untuk melukis bentuk di laman web: Menggunakan HTML dan CSS, menggunakan CSS sahaja, menggunakan SVG, dan menggunakan elemen kanvas HTML.

mata utama

atau ::before. SVG membolehkan mencipta bentuk yang lebih kompleks, manakala elemen kanvas HTML boleh digunakan untuk mencipta ciri grafik dan interaktif. ::after

Lukis segi empat tepat menggunakan html dan css

Membuat bentuk menggunakan HTML dan CSS sangat mudah. Kita boleh menggunakan elemen

untuk menetapkan lebar dan ketinggiannya, serta sempadan dan/atau warna latar: div

div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}

Salin selepas log masuk

Contoh codepen berikut menunjukkan hasilnya.

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Nota: Dalam contoh di atas, elemen berpusat menggunakan grid CSS. div

Sudah tentu kita juga boleh meletakkan kandungan dalam segi empat tepat. Sila cuba dalam contoh codepen di atas.

kita juga boleh menarik bentuk lain dengan bantuan atribut

, seperti bulatan: border-radius

div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}

Salin selepas log masuk

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

kita juga boleh menarik elips:

div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}

Salin selepas log masuk

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

kita juga boleh mencuba lebih banyak bentuk yang aneh, seperti:

div {
  width: 200px;
  height: 200px;
  border: 10px solid #ed21f3;
  background-color: #f7f7f7;
  border-radius: 50% 25%;
}

Salin selepas log masuk

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Bacaan Lanjut:

. border-radius

Lukis segi empat tepat menggunakan CSS sahaja

Dalam contoh di atas, kami menggunakan elemen HTML untuk membuat bentuk. Sekarang mari kita gunakan CSS.

Untuk melakukan ini, kami akan menggunakan CSS

pseudo-element. (Kita juga boleh menggunakan ::before). ::after

Berikut adalah apa yang boleh kita lakukan:

body::before {
  content: '';
  width: 500px;
  height: 200px;
  border: 10px solid #21f348;
  background-color: #f7f7f7;
}

Salin selepas log masuk

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Kami mencipta elemen pseudo yang dilampirkan pada elemen

dan kemudian gaya seperti yang menghadap elemen <body> di atas. Kami juga boleh menambah kandungan ke bentuk ini dengan meletakkan teks, imej, dan lain -lain antara petikan atribut div, seperti content. content: 'This is some content!'

Bacaan Lanjut:

anda boleh mengetahui lebih lanjut mengenai ::before dan ::after dalam panduan pseudo-elemen CSS kami.

Lukis segi empat tepat menggunakan svg

SVG membolehkan kita membuat bentuk yang sangat kompleks dalam HTML. Berikut adalah contoh mudah bagaimana untuk membuat segi empat tepat:

div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}

Salin selepas log masuk

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Bacaan Lanjut:

Ketahui lebih lanjut mengenai SVG.
Anda boleh membaca lebih lanjut mengenai menggunakan SVG pada MDN.

Buat segi empat tepat menggunakan elemen kanvas HTML

kita juga boleh membuat bentuk menggunakan elemen kanvas HTML. Kami mula -mula membuat elemen kanvas di HTML dan menetapkan lebar dan ketinggian:

div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}

Salin selepas log masuk

maka kami menambah JavaScript berikut:

div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}

Salin selepas log masuk

Contoh codepen berikut menunjukkan hasilnya.

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Bacaan Lanjut:

Baca tentang elemen kanvas pada MDN.
Baca artikel kami di Canvas vs SVG.

Ringkasan

Dalam artikel ini, kami memperkenalkan empat cara mudah untuk menarik bentuk dalam HTML. Kaedah mana yang harus kita gunakan bergantung pada apa yang ingin kita capai.

Lukisan bentuk dalam HTML dan gaya mereka menggunakan CSS sangat biasa dan ideal apabila membuat bekas kandungan untuk halaman HTML. Unsur -unsur gaya ini juga boleh digunakan untuk tujuan hiasan. (Semak Codepen untuk beribu -ribu cara kreatif untuk membuat karya seni yang menakjubkan menggunakan HTML dan CSS.)

Membuat bentuk menggunakan elemen pseudo CSS sangat mudah untuk menambahkan pengubahsuaian hiasan dan tooltip ke laman web.

SVG adalah alat yang sangat baik untuk mencipta bentuk ringan dan responsif untuk laman web. Kod SVG boleh tertanam di halaman HTML kami, atau kami boleh menghubungkan ke fail SVG seperti imej yang dipautkan dan membenamkannya ke dalam halaman dengan cara ini.

Elemen

<canvas></canvas> adalah platform yang kuat yang boleh digunakan untuk membuat pelbagai grafik dan ciri interaktif lain di laman web, tetapi biasanya memerlukan pemahaman yang cukup mendalam tentang JavaScript.

Akhirnya, jika anda ingin mengambil penciptaan bentuk dalam HTML ke peringkat seterusnya, anda juga boleh menyemak contoh -contoh indah berikut menggunakan CSS clip-path:

memperkenalkan sifat CSS clip-path dan tunjukkan cara menghidupkan bentuk.
Buat potret bersuara menggunakan fungsi CSS path(), menunjukkan cara menggunakan clip-path dengan SVG.

Soalan Lazim mengenai Cara Melukis Rectangles Dalam Html

(bahagian FAQ yang disebutkan dalam teks asal harus ditambah di sini, dan kandungannya harus ditulis semula dengan keaslian asal pseudo untuk memastikan niat asal tidak berubah)

Sila ambil perhatian bahawa kerana pautan codepen tidak dapat diakses, saya menggantikan pautan dengan pemegang tempat. Sila gantikannya dengan pautan codepen sebenar.

Atas ialah kandungan terperinci Empat cara mudah untuk melukis segi empat tepat di html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

3 minggu yang lalu By DDD

Bagaimana untuk memperbaiki KB5055518 gagal dipasang di Windows 10?

3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara menjinakkan serigala

4 minggu yang lalu By DDD

Tahap kekuatan untuk setiap musuh & raksasa di R.E.P.O.

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

2 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1658

Tutorial CakePHP

1415

Tutorial Laravel

1309

Tutorial PHP

1257

Tutorial C#

1231

Tunjukkan Lagi

Related knowledge

Fon Font Google Fon Apr 09, 2025 am 10:42 AM

Saya melihat Font Google melancarkan reka bentuk baru (tweet). Berbanding dengan reka bentuk besar yang terakhir, ini terasa lebih berulang. Saya hampir tidak dapat memberitahu perbezaannya

Cara membuat pemasa undur animasi dengan HTML, CSS dan JavaScript Apr 11, 2025 am 11:29 AM

Pernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi

Panduan Atribut Data HTML Apr 11, 2025 am 11:50 AM

Semua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.

Bukti konsep untuk menjadikan sass lebih cepat Apr 16, 2025 am 10:38 AM

Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula

Bagaimana Kami Membuat Tapak Statik yang Menjana Corak Tartan Di SVG Apr 09, 2025 am 11:29 AM

Tartan adalah kain berpola yang biasanya dikaitkan dengan Scotland, terutamanya kilt bergaya mereka. Di Tartanify.com, kami mengumpulkan lebih dari 5,000 Tartan

Cara Membina Komponen Vue dalam Tema WordPress Apr 11, 2025 am 11:03 AM

Arahan template inline membolehkan kita membina komponen Vue yang kaya sebagai peningkatan progresif ke atas markup WordPress yang sedia ada.

PHP adalah A-OK untuk templat Apr 11, 2025 am 11:04 AM

Templat PHP sering mendapat rap buruk untuk memudahkan kod subpar - tetapi itu tidak perlu berlaku. Mari kita lihat bagaimana projek PHP dapat menguatkuasakan asas

Pengaturcaraan sass untuk mencipta kombinasi warna yang boleh diakses Apr 09, 2025 am 11:30 AM

Kami sentiasa mencari untuk menjadikan web lebih mudah diakses. Kontras warna hanya matematik, jadi Sass dapat membantu menutup kes -kes kelebihan yang mungkin dilewatkan oleh para pereka.

See all articles