Cara menggunakan CSS untuk mencapai kesan pemadaman teks

Dalam reka bentuk web, kami mungkin memerlukan beberapa kesan khas untuk meningkatkan keindahan dan minat halaman. Sebagai contoh, kami mungkin memerlukan beberapa kesan teks untuk menyerlahkan beberapa maklumat penting atau menekankan kandungan tertentu. Salah satu daripada ini ialah pemotongan teks, di mana beberapa teks dicoret untuk menunjukkan bahawa ia tidak lagi sah atau berkaitan. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan pemadaman teks.

1. text-decoration: line-through;

Untuk mencapai kesan pemadaman teks, kita boleh menggunakan atribut text-decoration dan menetapkan nilai kepada line-through. Sifat ini biasanya digunakan untuk menggariskan teks, tetapi ia juga boleh digunakan untuk menetapkan kesan penyingkiran teks. Berikut ialah kod sampel:

<p class="delete">这是一段被删除的文本。</p>

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

Dalam contoh ini, kami menambah kelas bernama "padam" pada elemen p dan menetapkan nilai atribut hiasan teksnya kepada baris melalui . Ini bermakna bahawa dalam teks ini, perkataan akan dicoret untuk menunjukkan bahawa ia telah dipadamkan. Ini adalah cara paling asas dan mudah untuk mencapai kesan pemadaman teks.

2. Sesuaikan warna, gaya dan ketebalan coretan

Dalam gaya, kami boleh menyesuaikan warna, gaya dan ketebalan coretan selanjutnya. Atribut yang biasa digunakan ialah warna-hiasan-teks, gaya-hiasan-teks dan ketebalan-hiasan-teks. Berikut ialah contoh kod:

<p class="delete" style="text-decoration-color: red; text-decoration-style: dotted; text-decoration-thickness: 2px;">这是一段自定义线样式、线粗细和线颜色的被删除文本。</p>

.delete {
  text-decoration-color: red;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

Dalam contoh ini, kami turut menambah kelas bernama "padam" pada elemen p, tetapi kali ini kami menggunakan atribut tambahan gaya teks. Kami menetapkan warna coretan kepada merah, gaya kepada bertitik dan ketebalan kepada 2 piksel. Dengan cara ini kami boleh memperibadikan gaya penyingkiran teks mengikut keperluan untuk memenuhi keperluan khusus halaman web kami.

3. Gunakan pseudo-elements::before and ::after

Selain menggunakan atribut text-decoration, kita juga boleh menggunakan pseudo-elements::before dan ::selepas Untuk mencapai kesan pemadaman teks. Berikut ialah kod sampel:

<p class="delete">这是一段使用伪元素实现的被删除文本。</p>

.delete::before,
.delete::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #000;
}

.delete::before {
    transform: rotate(-45deg);
}

.delete::after {
    transform: rotate(45deg);
}

Dalam contoh ini, kami menggunakan elemen pseudo ::before dan ::after untuk mencipta coretan. Atribut kandungan unsur-unsur ini ditetapkan kepada kosong, dan kedudukannya ditetapkan kepada mutlak, membolehkan ia bertindih dengan teks. Kami menambah garis sempadan pada elemen ini dan kemudian memutarkannya 45 darjah untuk mencipta bentuk coretan.

Ringkasan

Apabila mereka bentuk halaman web, kesan pemadaman teks ialah kesan yang sangat berguna yang boleh membantu menggambarkan adegan dan dialog yang sesuai. Dalam artikel ini, kami memperkenalkan tiga cara untuk mencapai kesan pemadaman teks: atribut hiasan teks, gaya tersuai dan menggunakan elemen pseudo. Saya harap artikel ini dapat membantu anda meningkatkan fleksibiliti dan keseronokan reka bentuk web.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencapai kesan pemadaman teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!