pengetahuan asas CSS3 dan butiran

Apakah itu CSS3

CSS3 ialah versi CSS2 3 yang ditingkatkan hanyalah nombor versi Ia menambahkan banyak ciri baharu yang berkuasa berdasarkan CSS2.1. Pada masa ini, pelayar arus perdana chrome, safari, firefox, opera, dan juga 360 sudah menyokong kebanyakan fungsi CSS3 IE10 juga akan mula menyokong sepenuhnya CSS3.

Apabila menulis gaya CSS3, penyemak imbas yang berbeza mungkin memerlukan awalan yang berbeza. Ini bermakna sifat atau peraturan CSS belum lagi menjadi sebahagian daripada piawaian W3C dan merupakan harta peribadi penyemak imbas Walaupun versi penyemak imbas yang lebih baharu pada masa ini tidak memerlukan awalan, awalan masih diperlukan untuk keserasian hadapan yang lebih baik.

Nota: Kursus ini tidak menyokong versi di bawah IE9 Adalah disyorkan untuk menggunakan versi tertinggi pelayar chrome, safari, firefox dan opera untuk mempelajari kursus ini.

Apakah yang boleh dilakukan oleh CSS3?

Apakah faedah yang diberikan oleh CSS3 kepada kita? Ringkasnya, CSS3 boleh mencapai banyak kesan, dan juga kesan animasi, yang sebelum ini memerlukan penggunaan imej dan skrip hanya dalam beberapa baris kod. Contohnya, sudut bulat, sempadan gambar, bayang teks dan bayang kotak, peralihan, animasi, dsb.

CSS3 memudahkan proses reka bentuk untuk pembangun bahagian hadapan dan mempercepatkan pemuatan halaman.


serasi sepenuhnya ke belakang dengan CSS3, jadi anda tidak perlu menukar reka bentuk sedia ada anda. Pelayar akan sentiasa menyokong CSS2.

Modul CSS3

CSS3 dibahagikan kepada "modul". Spesifikasi lama telah dipecahkan kepada kepingan kecil dan yang baru telah ditambah.

Beberapa modul CSS3 yang paling penting adalah seperti berikut:

Pemilih

Model Kotak

Latar Belakang dan Sempadan

Kesan Teks

Penukaran 2D/3D

Animasi

Susun atur berbilang lajur

Antara Muka Pengguna

Syor CSS3

W3Css spesifikasi masih ada pembangunan.

Walau bagaimanapun, banyak sifat CSS3 baharu tersedia dalam penyemak imbas moden.


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <style> div { width:100px; height:75px; background-color:pink; border:1px solid black; } div#div2 { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>这是一个 DIV 元素。</div> <div id="div2">这是一个 DIV 元素。</div> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus