css3 tulis padam

CSS3 ialah bahasa helaian gaya yang digunakan untuk reka bentuk dan reka letak web Ia mempunyai ciri yang kaya dan fungsi yang berkuasa. Antaranya, coretan ialah kesan biasa, biasanya digunakan untuk mewakili teks atau kandungan yang dipadamkan. Artikel ini akan memperkenalkan cara menulis coretan menggunakan CSS3.

1. Gunakan atribut hiasan teks

Atribut hiasan teks digunakan untuk menetapkan kesan hiasan teks, termasuk kesan coretan. Dengan menetapkan nilainya kepada garisan, kesan garisan boleh dicapai. Contohnya, kod CSS berikut:

.delete {
    text-decoration: line-through;
}

Gaya ini akan digunakan pada elemen dengan pemadaman nama kelas, supaya semua kandungan teks akan mempunyai kesan coretan.

2. Gaya coretan tersuai

Selain menggunakan atribut hiasan teks untuk menetapkan kesan coretan, CSS3 juga menyediakan pelbagai cara untuk menyesuaikan gaya coretan, jadi bahawa Ia lebih cantik dan diperibadikan.

2.1 Tetapkan warna coretan

Tetapkan warna coretan melalui sifat warna hiasan-teks, contohnya:

.delete {
    text-decoration: line-through;
    text-decoration-color: red;
}

Gaya ini akan digunakan pada elemen padam nama kelas supaya warna coretan semua kandungan teks berwarna merah.

2.2 Tetapkan kedudukan coretan

Tetapkan kedudukan coretan melalui sifat kedudukan-hiasan teks. Secara lalai, coretan berada di tengah-tengah teks Anda boleh menggunakan sifat ini untuk menetapkan offset atas dan bawah coretan.

.delete {
    text-decoration: line-through;
    text-decoration-position: under;
}

Gaya ini akan digunakan pada elemen dengan pemadaman nama kelas supaya kedudukan coretan semua kandungan teks berada di bawah teks.

2.3 Tetapkan lebar coretan

Tetapkan lebar coretan melalui sifat ketebalan-hiasan teks. Secara lalai, lebar coretan ialah 1px. Anda boleh menggunakan sifat ini untuk menukar lebar coretan.

.delete {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

Gaya ini akan digunakan pada elemen dengan pemadaman nama kelas, menjadikan semua kandungan teks mempunyai lebar coretan 2px.

3. Gunakan elemen pseudo untuk mencapai coretan

Selain menggunakan atribut hiasan teks untuk menetapkan kesan coretan, CSS3 juga boleh menggunakan elemen pseudo untuk mencapai kesan coretan . Dengan menetapkan atribut kandungan unsur pseudo kepada mengosongkan dan menetapkan lebar, warna, kedudukan dan atribut lain, anda boleh mencapai kesan coretan. Contohnya, kod CSS berikut:

.delete::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

Gaya ini akan digunakan pada elemen pseudo elemen dengan nama kelas padam, menyebabkan ia memaparkan coretan dengan lebar 1px dan warna hitam di bawah teks.

Ringkasan

Melalui atribut hiasan teks, gaya coret tersuai dan elemen pseudo, kami boleh mencapai kesan coret dengan mudah. Perlu diingat bahawa dalam beberapa senario khas, seperti pertimbangan pengalaman membaca atau pengoptimuman SEO, coretan tidak digunakan. Ia perlu dipertimbangkan berdasarkan situasi khusus semasa menggunakannya.

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