Bu makale, Tailwind'de kutu dekorasyonlu vurgulu uygulama prosedürünü gösterecektir.
Tailwind'de Box Dekorasyon Arasında Hover Nasıl Uygulanır?
'box-decoration-break' CSS özelliği, bir öğe birden çok satıra veya sütuna yayıldığında arka planın, kenarlığın ve dolgunun oluşturulmasını belirler. Kutu dekorasyon kırma elemanları üzerinde fareyle üzerine gelme efekti uygulamak için “” kullanılması gerekmektedir. üzerine gelin ” özelliğini açın ve öğelere herhangi bir efekt uygulayın.
Pratik bir gösteri için aşağıda sağlanan adımlara göz atın:
Adım 1: HTML Programında Kutu Süsleme Arasında Hover Özelliğini Kullanın
Bir HTML programı oluşturun ve kutu dekorasyonu kesme öğeleri üzerinde herhangi bir vurgulu özelliği kullanın. Örneğin, bir “uyguladık vurgulu:kutu-dekorasyon-klonu “kutu dekorasyon dilimi” öğesinde ” özelliği ve “ üzerine gelin: metin-sarı-500 'box-decoration-clone' öğesindeki özellik:
< vücut >
< açıklık sınıf = 'kutu-dekorasyon-dilim vurgulu:kutu-dekorasyon-klon bg-teal-600 metin-beyaz metin-3xl px-2' >
linux < br / >
İpucu
< / açıklık >
< br >
< br >
< açıklık sınıf = 'kutu-dekorasyon-klon vurgulu: metin-sarı-500 bg-teal-600 metin-beyaz metin-3xl px-2' >
linux < br / >
İpucu
< / açıklık >
< / vücut >
Burada:
- “ vurgulu:kutu-dekorasyon-klonu ”, “kutu dekorasyon dilimi” öğesinin üzerine getirildiğinde bir “kutu dekorasyon klonu” efekti uygular.
- “ üzerine gelin: metin-sarı-500 ”, “box-decoration-clone” öğesinin üzerine gelindiğinde metin rengini sarıya değiştirir.
2. Adım: Çıktıyı Doğrulayın
Çıktıyı doğrulamak için HTML programını çalıştırın:
Yukarıdaki çıktı, vurgulu efektinin belirtildiği öğelere uygulandığını gösterir.
Çözüm
Tailwind CSS, herhangi bir öğeye vurgulu efektler uygulamak için bir yardımcı sınıf koleksiyonu sunar. Kutu dekorasyon kırma öğelerinin üzerine fareyle gelmek için ' üzerine gelin ” özelliği ve HTML programında efekti belirtin. Kullanıcılar arka plan rengini, metin rengini ve kenarlık rengini değiştirebilir veya üzerine gelindiğinde bir öğeye gölge ekleyebilir. Bu makale, Tailwind'de kutu dekorasyonlu vurgulu uygulama prosedürünü açıklamaktadır.