레이아웃
box-decoration-break
여러 줄, 컬럼 또는 페이지에 걸쳐 엘리먼트 프래그먼트가 렌더링되는 방식을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
box-decoration-clone | box-decoration-break: clone |
box-decoration-slice | box-decoration-break: slice |
예제
기본 예제
box-decoration-slice와 box-decoration-clone 유틸리티를 사용하여 배경, 테두리, 테두리 이미지, 박스 그림자, 클리핑 경로, 마진, 패딩과 같은 속성이 엘리먼트를 하나의 연속된 프래그먼트로 렌더링할지, 아니면 별개의 블록으로 렌더링할지 제어할 수 있습니다.
box-decoration-slice
Hello
World
World
box-decoration-clone
Hello
World
World
<span class="box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ..."> Hello<br />World</span><span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ..."> Hello<br />World</span>반응형 디자인
접두사 a box-decoration-break 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="box-decoration-clone md:box-decoration-slice ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
