Cara Menambah Teks di Sempadan Menggunakan Elemen HTML Asas

Banyak elemen HTML, sementara berfungsi, mempunyai gaya lalai yang bertembung dengan estetika reka bentuk web moden.<fieldset></fieldset> dan<legend></legend> , biasanya digunakan untuk mengawal borang pengumpulan, menawarkan penyelesaian yang unik untuk membuat teks bersempadan. Gabungan ini secara semulajadi meletakkan teks di dalam sempadan, tanpa garis sempadan merentasi teks. Artikel ini menunjukkan kaedah yang mudah namun berkesan untuk memanfaatkan ciri ini untuk membuat reka bentuk teks sempadan yang bergaya.

Kami akan membina reka bentuk menggunakan empat<fieldset></fieldset> elemen, masing -masing mengandungi a<legend></legend> elemen untuk teks sempadan. Prinsip teras melibatkan memanipulasi sempadan dan kedudukan unsur -unsur ini untuk mencapai kesan yang diingini.

Pertama, kita menyusun<fieldset></fieldset> unsur -unsur, menggunakan gaya untuk mengawal sempadan mereka. Hanya sempadan atas masing -masing<fieldset></fieldset> akan kelihatan; Yang lain dibuat telus. Kami juga menggunakan box-sizing: border-box untuk memastikan saiz yang konsisten, termasuk sempadan dan padding. Penyusunan boleh dicapai menggunakan pelbagai kaedah susun atur, seperti grid.

Cuci tangan anda

Tinggal terpisah

Pakai topeng

Tinggal di rumah

 badan {
  paparan: grid;
  Margin: Auto;
  margin -top: calc (50VH - 170px);
  lebar: 300px;
  Ketinggian: 300px;
}

FieldSet {
  Sempadan: 10px Pepejal Telus;
  Border-top-color: hitam;
  saiz kotak: kotak sempadan;
  grid-kawasan: 1/1;
  Padding: 20px;
  lebar: mewarisi;
}

Untuk membuat sempadan sampingan dan bawah, kami memutar tiga yang terakhir<fieldset></fieldset> Unsur menggunakan CSS Transforms:

 / * berputar ke kanan */
FieldSet: nth-of-type (2) {transform: berputar (90deg); }
/ * berputar ke bawah */
FieldSet: nth-of-type (3) {transform: berputar (180deg); }
/ * berputar ke kiri */
FieldSet: nth-of-type (4) {transform: berputar (-90deg); }

Seterusnya, kami gaya<legend></legend> unsur -unsur. Secara kritikal, line-height kecil atau sifar adalah penting untuk penjajaran sempadan yang tepat. Ketinggian garis yang lebih besar boleh menggantikan sempadan, mengganggu reka bentuk. Kami juga menggunakan transformasi CSS untuk membetulkan orientasi bahagian bawah<legend></legend> elemen, yang terbalik kerana putaran ibu bapanya<fieldset></fieldset> .

 legenda {
  Font: 15pt/0 'Averia Serif Libre';
  Margin: Auto;
  Padding: 0 4px;
}

Fieldset: Nth-of-Type (3)> Legend {
  Transform: berputar (180deg);
}

Menambahkan gambar ke yang pertama<fieldset></fieldset> Meningkatkan reka bentuk. Penjajaran teks mendatar di dalam sempadan boleh diselaraskan menggunakan sifat margin-left dan margin-right . Nilai auto untuk kedua -dua margin pusat teks.

Bonus: Teknik ini boleh diperluaskan untuk mencipta bentuk yang lebih kompleks, seperti reka bentuk oktagon yang ditunjukkan dalam contoh asal. Dengan berhati -hati menyesuaikan giliran, kedudukan, dan gaya sempadan, pelbagai reka bentuk teks sempadan kreatif mungkin.

Atas ialah kandungan terperinci Cara Menambah Teks di Sempadan Menggunakan Elemen HTML Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!