Apakah ciri baharu css3

Ciri baharu css3 termasuk pemilih, model kotak, warna, latar belakang, sempadan dan bayang-bayang, kesan teks, reka letak dan susun atur bendalir, susun atur berbilang lajur, animasi dan peralihan, reka bentuk responsif, dsb. Pengenalan terperinci: 1. Pemilih, pemilih atribut, pemilih kelas pseudo, pemilih elemen pseudo dan pemilih berbilang 2. Model kotak, sifat Peti saiz menukar model kotak CSS lalai untuk memudahkan susun atur; CSS3 menambah sokongan untuk ketelusan, gunakan rgba(), hsla() atau kelegapan untuk menetapkannya, dsb.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

CSS3 ialah evolusi terkini teknologi CSS, yang memperkenalkan banyak ciri baharu untuk meningkatkan keupayaan reka bentuk pereka dan pembangun. Berikut ialah beberapa ciri baharu CSS3:

1. Pemilih:

   • Pemilih atribut: Pilih elemen dengan atribut khusus, seperti [attr=value].
   • Pemilih kelas pseudo: Tambahkan gaya pada elemen dalam keadaan tertentu, seperti :hover, :active, :visited.
   • Pemilih unsur pseudo: Pilih bahagian tertentu unsur, seperti ::sebelum, ::selepas.
   • Pemilih berbilang: Gunakan koma untuk memisahkan berbilang elemen pada masa yang sama, seperti elemen1, elemen2.

2. Model Kotak: Sifat bersaiz Kotak menukar model kotak CSS lalai untuk memudahkan susun atur.

3. Warna:

   • CSS3 menambah sokongan untuk ketelusan, gunakan rgba(), hsla() atau kelegapan untuk menetapkan.
   • CSS3 menyediakan ruang warna baharu seperti RGBA, HSL dan HSLA.

4. Latar belakang:

   • saiz latar belakang: Membolehkan anda menukar saiz imej latar belakang.
   • background-repeat: Membolehkan anda menukar gelagat berulang imej latar belakang anda.
   • kedudukan latar belakang: membolehkan anda mengalihkan imej latar belakang secara mendatar dan menegak.
   • imej latar belakang: Membenarkan berbilang imej latar belakang digunakan pada masa yang sama.

5. Sempadan dan bayang-bayang:

   • jejari sempadan: Tambahkan bucu bulat pada sempadan.
   • box-shadow: Tambahkan kesan bayang-bayang pada elemen.

6. Kesan teks:

   • text-shadow: Tambahkan kesan bayang-bayang pada teks.
   • text-overflow: Kendalikan mod paparan teks limpahan.

7. Layout dan Bendalir:

   • Flexbox: Model reka letak baharu CSS3 untuk reka letak satu dimensi.
   • Grid: Model reka letak baharu CSS3 untuk reka letak 2D.

8. Reka Letak Berbilang Lajur: CSS3 menyediakan cara untuk mencipta teks atau reka letak berbilang lajur, serupa dengan reka letak akhbar.

9. Animasi dan Peralihan: CSS3 menyokong animasi bingkai utama dan kesan peralihan untuk mencipta kesan dinamik dalam CSS. Animasi boleh dikawal melalui sifat peralihan dan animasi.

10. Reka Bentuk Responsif: CSS3 menyediakan ciri seperti pertanyaan media yang membolehkan pembangun membuat reka bentuk web responsif yang dipaparkan dengan baik pada peranti dan saiz skrin yang berbeza.

11. Ciri-ciri lain:

    • CSS3 menambah sokongan untuk imej SVG.
    • CSS3 menyediakan cara baharu untuk mentakrifkan fon (@font-face).
    • CSS3 menyokong elemen pseudo tersuai (contohnya, ::sebelum dan ::selepas).
    • CSS3 menyokong pemilih CSS yang lebih kompleks, seperti pemilih kanak-kanak, pemilih adik beradik bersebelahan, dsb.
    • CSS3 menyokong sifat garis besar dan garis offset, yang sangat berguna apabila menyerlahkan elemen.
    • CSS3 menyokong kecerunan linear dan kecerunan jejarian.
    • CSS3 menyokong lukisan grafik terus pada halaman, seperti segi empat tepat, bulatan, elips, dll. Ini dicapai dengan menggunakan elemen kanvas dan JavaScript.
    • CSS3 menyokong penjanaan gaya fon yang kompleks, termasuk hiasan fon seperti superskrip, subskrip, dsb.

12. Atribut baharu yang muncul dalam HTML5 turut disokong dalam CSS3, seperti video, audio, ruang letak, radio jenis input, kotak semak jenis input, nombor jenis input, julat jenis input, input -jenis-tarikh, input-jenis-masa, input-jenis-tarikh-masa, input-jenis-bulan, input-jenis-minggu, input-jenis-e-mel, input-jenis-carian, input-jenis-tel, input-jenis -warna, kemajuan, meter, set medan, output, keygen, senarai data, arahan, peta, kawasan, trek, wbr, dsb. Atribut baharu ini membolehkan HTML5 menyokong aplikasi web baharu dan keperluan pengguna baharu dengan lebih baik.

Atas ialah kandungan terperinci Apakah ciri baharu css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!