Chrome 130의box-decoration-break 속성

Rachel Andrew

게시일: 2024년 10월 11일

Chrome 130에서는 box-decoration-break CSS 속성을 사용할 수 있으며clone 인라인 및 블록 조각화를 지원합니다. 이 게시물에서는 이 속성을 사용하는 이유와 방법을 설명합니다.

인라인 조각화

인라인 조각화는 텍스트 문자열과 같은 인라인 요소가 여러 줄에 걸쳐 분할될 때 발생합니다. 인라인 요소에는 일반적으로 생각할 필요가 없는 상자가 있지만 요소에 배경 또는 테두리를 추가하려고 하면 상자가 필요합니다. 다음 예에서는 border-radius가 있는 배경이 span에 추가됩니다. 테두리는 문자열의 시작과 끝에서만 곡선으로 표시됩니다.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

box-decoration-break의 초기값은 slice이며 상자에 이 슬라이스 효과를 제공합니다. 그러나 새로 지원되는 box-decoration-break: clone은 각 줄이 둥근 테두리로 시작하고 끝난다는 의미입니다.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}