Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS box-decoration-break özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

46 views

box-decoration-break CSS özelliği, bir inline öğe (örneğin, bir <span> veya inline <div>) birden fazla satıra veya sütuna bölündüğünde, öğenin dekoratif özelliklerinin (arka plan, kenarlık, marjlar, dolgular) nasıl uygulanacağını kontrol eder. Bu özellik, özellikle çok satırlı inline öğeler veya sütunlara bölünmüş metinlerle çalışırken, dekorasyonun bölümler arasında nasıl davranacağını belirlemenize olanak tanır. Özellik iki ana değer alır:

slice: Bu değer, öğenin her bir bölümünün (örneğin, bir satıra veya sütuna bölünmüş metin) ayrı bir kutu olarak ele alınmasını ve her birine dekorasyonun (arka plan, kenarlık vb.) bağımsız olarak uygulanmasını sağlar. Bu, varsayılan davranıştır.

clone: Bu değer, öğenin her bölümüne öğenin tamamıymış gibi dekorasyonun uygulanmasını sağlar. Bu, örneğin, bir arka plan görüntüsünün veya renginin her satırda yeniden başlamasını sağlayabilir.

Örnek Kullanım:

.multiline-span {
  box-decoration-break: clone;
  background-color: lightblue;
  border: 1px solid blue;
  padding: 5px;
}

Bu örnekte, .multiline-span sınıfına sahip bir öğe çok satırlı ise (yani içeriği bir satırı aşıp yeni bir satıra geçiyorsa), her satır kendi başına bir kutu gibi davranır ve background-color, border ve padding gibi dekoratif özellikler her satıra bağımsız olarak uygulanır. clone değeri sayesinde, her satır öğenin tamamıymış gibi aynı dekorasyona sahip olur. Bu, metin kutularının, etiketlerin veya diğer dekoratif elementlerin görsel tutarlılığını korumak için kullanışlı bir yoldur.

 

TailwindCSS:

Class
Properties
box-decoration-clone box-decoration-break: clone;
box-decoration-slice box-decoration-break: slice;

1.png

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...