penggunaan css3

CSS3 ialah versi CSS yang dinaik taraf. Ia menambahkan banyak ciri baharu, membolehkan kami mengawal gaya dan kesan halaman dengan lebih fleksibel. Artikel ini akan memperkenalkan penggunaan CSS3 dan membantu anda menguasai CSS3 dengan lebih baik.

1. Fon terbenam

Dalam CSS3, kami boleh membenamkan fon menggunakan peraturan @font-face. Ini bermakna kita tidak perlu lagi bergantung pada pustaka fon lalai penyemak imbas, tetapi boleh menggunakan fon yang ditentukan sendiri untuk mencapai kesan halaman yang lebih baik.

@font-face {

 font-family: "MyFont";
 src: url("myfont.ttf");

}

2. Gaya sempadan

Dalam CSS3, kita boleh menggunakan lebih banyak Gaya sempadan seperti sempadan bulat, sempadan berbayang, dsb. Gaya sempadan ini boleh menjadikan halaman kami lebih cantik dan unik.

jejari sempadan: 5px; / Jidar bulat/
bayang kotak: 2px 2px 5px #333; / Sempadan bayang/

3. Warna Kecerunan

Warna kecerunan dalam CSS3 membolehkan kami mencapai kesan kecerunan warna dengan lebih mudah. Kita boleh mentakrifkan kecerunan linear atau kecerunan jejarian, dan menetapkan warna permulaan dan warna penamat untuk mencapai pelbagai kesan kecerunan.

latar belakang: kecerunan linear(ke kanan, merah, biru); / Kecerunan linear/
latar belakang: jejari-kecerunan(bulatan, merah, biru); Kecerunan jejari/

Reka letak teleskopik

Dalam CSS3, kami boleh menggunakan reka letak flexbox, yang membolehkan kami melaksanakan reka letak halaman dengan lebih mudah . Susun atur Flexbox boleh mencapai pelbagai susunan, seperti susunan mendatar, susunan menegak, dsb., dengan menetapkan sifat bekas.

paparan: lentur; /

Tetapkan sebagai bekas lentur /arah lentur: baris; /
Susun secara mendatar /kandungan justify: tengah; /
Penjajaran tengah/

Kesan animasi

Kesan animasi dalam CSS3 membolehkan kami mencapai pelbagai kesan animasi, seperti kecerunan, Putaran , pergerakan dan kesan lain. Kita boleh menetapkan keadaan permulaan dan keadaan akhir animasi, serta masa dan jenis lengkung animasi untuk mencapai kesan animasi yang kita inginkan.

animasi: myanimation 2s ease-in-out; /

Tetapkan animasi/@keyframes myanimation {

 from { opacity: 0; }
 to { opacity: 1; }

} /

Tentukan kesan animasi/

Ringkasan

Melalui pengenalan artikel ini, kami telah mempelajari tentang pelbagai kegunaan CSS3, termasuk fon terbenam, gaya sempadan, warna kecerunan, reka letak boleh ditarik balik dan kesan animasi. Ciri baharu ini memberikan kami lebih banyak kemungkinan untuk mencapai kesan halaman yang lebih baik. Sudah tentu, ini hanya sebahagian daripada kandungan CSS3, dan terdapat banyak lagi yang perlu kita pelajari dan kuasai.

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