Pernyataan Hak Cipta: Hak cipta artikel ini milik penulis asli. Terjemahan hanya untuk referensi pembaca domestik
. Ringkasan artikel ini: Trik CSS yang paling umum digunakan, seperti sudut membulat, drop caps, dll.
Ada terjemahan sebelumnya dari "8 Trik CSS Satu Kalimat" yang memperkenalkan 8 trik CSS satu kalimat yang sangat berguna. Minggu ini saya akan membawakan Anda artikel serupa, yang memperkenalkan beberapa Trik CSS yang paling umum digunakan, atau disebut a. Trik CSS. Tentu saja, saya yakin setiap desainer akan memiliki preferensi pribadi. Saya pribadi tidak terlalu menyukai beberapa trik dalam artikel ini.
1. Jangan gunakan efek sudut membulat pada gambar
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{tampilan: blok; tinggi: 1px; meluap: tersembunyi}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
(Banyak orang suka menggunakan teknik pembulatan ini, tapi saya pribadi tidak terlalu menyukainya. Meskipun saya tidak perlu membuat gambar dengan sudut membulat, tag tambahan ini selalu terasa berlebihan)
2. Daftar bergaya
Ini baris pertama
Ini baris kedua
Dan baris terakhir
ol{
font: miring 1em Georgia, Times, serif;
warna: #999999;
}
ol p {
jenis huruf: normal .8em Arial, Helvetica, sans-serif;
warna: #000000;
}
Saya juga sangat menyukai efek ini. Anda dapat menerapkan font berbeda ke nomor seri.
3. Bentuk tanpa tabel
4. Teknik tanda kutip ganda
5. Efek gradien kata
6. Pemusatan vertikal
Untuk lebih jelasnya lihat teks aslinya
10. Drop cap
Paragraf ini mempunyai kelas “introduction”. browser Anda mendukung kelas semu “huruf pertama”, huruf pertama akan menjadi huruf kapital
p.introduction:first-letter {.
ukuran font: 300%;
berat font: tebal;
mengapung: kiri;
lebar: 1em;
}