Ajar anda cara menggunakan css3 untuk menambah kesan tiga dimensi pada fon (dengan kod)

Dalam artikel sebelumnya "Ajar anda langkah demi langkah cara menggunakan html css untuk mencapai kesan karusel (perkongsian kod) ", saya memperkenalkan anda cara menggunakan html css untuk mencapai kesan karusel. Artikel berikut akan memperkenalkan kepada anda cara menggunakan css3 untuk menambah kesan tiga dimensi pada fon Mari lihat cara melakukannya bersama-sama.

Kesan tiga dimensi penambahan fon adalah seperti berikut

1 🎜> fail, tulis dahulu Input teg html menulis atribut div untuk menentukan sama ada pengguna dibenarkan mengedit kandungan dan menghapuskan isu keserasian. contenteditableAnda boleh mengedit kandungan di dalam <div contenteditable="true"> dan <code>

ialah pemilih kelas yang boleh mengawal warna fon dalam halaman web secara statik semata-mata. class

contoh kod html

<div contenteditable="true" class="text eff">字体特效</div>

2 Dengan memberikan

tetapan global, tulis kod rentetan css antara teg head dan kemudian tambahkannya dalam <style type="text/css"> tag Masukkan style untuk atribut div untuk menetapkan warna latar belakang elemen. background-color

Contoh kod

body{
  background-color: #456;
}

Kesan kod

3. Kesan sudah keluar, cuma tambah warna pada latar belakang , dan kemudian Berikan kesan fon dengan memasukkan fon, saiz fon, penjajaran mendatar, berat, jarak baris, saiz fon, atas, bawah, kiri dan kanan atribut dalam teg

. style

Contoh kod

.text {
    font-family:"微软雅黑", "Dosis", sans-serif;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    line-height:200px;
    text-transform:uppercase;
    position: relative;
}

Kesan kod

4. Kesan

keluar, cuma tukar fon Jadikan ia tebal dan berpusat Seterusnya, nyatakan fon dengan memasukkan warna latar belakang dan bayang dalam teg . style

Gunakan atribut untuk menjana kesan bayangan teks. Penggunaannya sangat mudah, text-shadow, text-shadow:0px 0px 0px #000 paksi, X paksi, tahap kabur (tidak boleh negatif), warna bayang-bayang. Y

Contoh kod

.eff{
    background-color: #333;
    color:#fefefe;
    text-shadow:
    0px 1px 0px #c0c0c0,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, 0.6);
}

Kesan kod

Lulus Pelbagai kesan khas boleh dicapai dengan mengubah suai parameter

ok, kod pengeditan selesai.

Pembelajaran yang disyorkan:

Tutorial pengenalan CSS3

Atas ialah kandungan terperinci Ajar anda cara menggunakan css3 untuk menambah kesan tiga dimensi pada fon (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!