tetapan kotak teks css

Dengan perkembangan teknologi Internet yang berterusan, reka bentuk web juga telah menerima banyak perubahan dan kemas kini. Kotak teks ialah salah satu elemen yang paling biasa digunakan dalam reka bentuk web. Tetapannya bukan sahaja mempengaruhi penampilan tapak web, tetapi juga mempengaruhi pengalaman pengguna dan kebolehgunaan tapak web. Artikel ini akan memperkenalkan cara menyediakan kotak teks CSS, termasuk gaya asas, warna latar belakang, sempadan bulat, bayang-bayang, ketelusan dan kesan animasi kotak teks.

1. Gaya asas kotak teks

Kotak teks ialah salah satu elemen yang paling banyak digunakan dalam reka bentuk web. Ia membolehkan pengguna memasukkan pelbagai maklumat, seperti kotak carian dan mesej. kotak dan kotak komen, dsb. Dalam CSS, kita boleh menggunakan kod berikut untuk mentakrifkan gaya asas kotak teks:

input[type=text], textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}

Dalam kod CSS di atas, kami menggunakan pemilih input[type=text] dan pemilih textarea untuk mentakrifkan kotak teks Gaya asas. Gaya khusus termasuk lebar, padding, jidar, jidar, warna jidar, bucu bulat jidar, warna latar belakang, saiz fon dan saiz semula kotak teks.

2. Warna latar belakang kotak teks

Warna latar belakang kotak teks boleh ditetapkan melalui sifat warna latar belakang CSS. Anda boleh menyesuaikan warna latar belakang kotak teks untuk memenuhi keperluan reka bentuk yang berbeza. Berikut ialah contoh, menggunakan kelabu gelap sebagai warna latar belakang kotak teks:

input[type=text], textarea {
  background-color: #333;
}

3. Jidar bulat kotak teks

Jidar bulat ialah gaya reka bentuk kotak teks yang biasa digunakan . Ia boleh menjadikan halaman kelihatan lebih hangat dan mesra. Dalam CSS, kita boleh menggunakan sifat jejari sempadan untuk menetapkan saiz bulat sempadan kotak teks. Berikut ialah contoh:

input[type=text], textarea {
  border-radius: 10px;
}

4. Bayang-bayang kotak teks

Bayang-bayang boleh menjadikan elemen halaman kelihatan lebih tiga dimensi dan nyata. Kita boleh menggunakan sifat kotak-bayang untuk menetapkan kesan bayang-bayang kotak teks. Berikut ialah contoh:

input[type=text], textarea {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

di mana parameter pertama mewakili offset mendatar bayang, parameter kedua mewakili offset menegak, parameter ketiga mewakili jejari kabur dan parameter keempat mewakili warna bayang dan ketelusan.

5. Ketelusan kotak teks

Ketelusan merujuk kepada kelegapan elemen Kita boleh menggunakan atribut kelegapan untuk menggunakan ketelusan dalam kotak teks. Berikut ialah contoh:

input[type=text], textarea {
  opacity: 0.7;
}

6. Kesan animasi kotak teks

Kesan animasi boleh menjadikan elemen halaman web lebih menarik perhatian dan meningkatkan pengalaman pengguna. Kita boleh menggunakan sifat peralihan CSS untuk menghidupkan kotak teks. Berikut ialah contoh:

input[type=text], textarea {
  transition: all 0.3s ease-in-out;
}
input[type=text]:hover, textarea:hover {
  transform: scale(1.05);
}

Kod di atas akan menambah kesan pembesaran pada kotak teks pada tetikus. Baris pertama kod menetapkan kesan peralihan untuk semua sifat, dan baris kedua kod menambah kesan pembesaran.

Ringkasan:

Kotak teks ialah elemen yang biasa digunakan dalam reka bentuk web Dengan menggunakan CSS untuk menggayakan kotak teks, anda boleh menjadikannya lebih cantik, meningkatkan pengalaman pengguna dan kebolehgunaan tapak web. Kod sampel yang disediakan di sini boleh digunakan sebagai rujukan untuk pembaca, dan juga boleh diperibadikan untuk memenuhi keperluan reka bentuk yang berbeza.

Atas ialah kandungan terperinci tetapan kotak teks css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!