CSS menggunakan teknologi Sprites untuk mencapai pertukaran sudut bulat_Pengalaman

Pertama sekali, mari kita bincangkan secara ringkas tentang apa itu Sprites ialah kaedah pemprosesan aplikasi imej web. Ia membolehkan anda memasukkan semua gambar bertaburan yang terlibat dalam halaman ke dalam satu gambar besar, supaya apabila halaman itu diakses, gambar yang dimuatkan tidak akan dipaparkan satu persatu seperti sebelum ini. Untuk kelajuan rangkaian popular semasa, masa pemuatan yang diperlukan untuk satu imej tidak melebihi 200KB pada asasnya adalah sama, jadi tidak perlu risau tentang isu ini.

Langkah 1: Cipta Sprite kami

Gunakan alatan seperti PS untuk mensintesis gambar seperti yang ditunjukkan dalam gambar (dibezakan dengan garis merah satu piksel)

Langkah 2: Tulis kod HTML

Pertama, kami akan memberikan div kontena kelas .roundedBox:

Salin kod Kod adalah seperti berikut:

Kini, kita perlu menambah empat lagi div, yang akan digunakan apabila membuat sudut bulat pada masa hadapan. Kemudian kelas .corner mesti dimuatkan untuk setiap satu dan kelas mesti dikenal pasti untuk menentukan kedudukan grid mereka.

Salin kod Kod adalah seperti berikut:

Kandungan saya dalam roundedBox Jenis 1

Langkah 3: Tulis gaya CSS

Elemen yang diposisikan secara mutlak biasanya diletakkan mengikut elemen induknya yang agak kedudukannya. Jika elemen induk tidak dapat ditakrifkan, maka ia akan pergi ke elemen induk yang agak diposisikan terkini, sehingga teg badan.

Mari kita tentukan semua fillet dahulu

Semua fillet mesti diletakkan secara mutlak dan ditandakan dengan ketinggian dan lebar. Lebar dan tinggi definisi fillet saya ialah 17px.

Salin kod Kod adalah seperti berikut:

.corner{position:absolute;width:17px;height:17px;}

Sekarang mula mentakrifkan gaya bekas div:

Salin kod Kod adalah seperti berikut:

.roundedBox {kedudukan:relative;}

Dalam mana-mana elemen yang ditakrifkan dengan kelas .roundedBox, elemen yang diposisikan secara mutlak akan diposisikan secara relatif kepada elemen ini, bukan badan label. Kita juga perlu menetapkan beberapa nilai padding Jika tidak ditetapkan, sudut bulat akan meliputi teks kita, yang pastinya bukan kesan yang kita inginkan. Penting: Nilai padding atas dan bawah mestilah sama dengan ketinggian fillet. Nilai padding kiri dan kanan mestilah bersamaan dengan lebar fillet. Seperti yang anda sedia maklum, lebar dan tinggi fillet saya adalah sama, oleh itu, nilai padding empat penjuru juga sama:

Salin kod Kod adalah seperti berikut:

.roundedBox {kedudukan:relatif; padding:17px;

Mari buat definisi berasingan untuk tiada sudut bulat

Kami akan menetapkan kedudukan mutlak setiap sudut bulat dan meletakkan imej latar belakang (mengikut sprite kami):

Salin kod Kod adalah seperti berikut:

.roundedBox {kedudukan:relatif; padding:17px; .corner {kedudukan:absolute; lebar:17px; .topLeft {atas:0; left: background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left: background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

Akhir sekali, padankan warna latar belakang dengan #type1 supaya ia sebati dengan sudut bulat dalam sprite:

Salin kod Kod adalah seperti berikut:

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}

Semua kod:

Salin kod Kod adalah seperti berikut:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">


Dokumen Tanpa Tajuk

Kandungan saya dalam roundedBox Jenis 1