CSS 테두리 및 박스 장식 모듈 레벨 4

1. 소개

이 명세는 CSS 배경 및 테두리 모듈 3 레벨 [CSS3BG]의 테두리 및 박스 장식과 관련된 부분을 확장합니다. 현재는 변경점(diff) 명세이며, 테두리와 박스 장식 관련 나머지 기능은 [CSS3BG]를 참조하세요.

추가된 corner-*-shape 및 border-shape 속성과, border-*-radius, box-shadow-* 롱핸드 속성의 논리적 축약형, 그리고 border-limit 및 border-*-clip 속성을 통한 부분 테두리를 명세합니다.

3레벨의 본문을 이 초안에 병합해야 합니다.

2. 테두리

테두리는 미리 정의된 스타일(실선, 이중선, 점선, 의사 3D 테두리 등)일 수도 있고 이미지일 수도 있습니다. 전자의 경우, 다양한 속성으로 스타일(border-style), 색상(border-color), 두께(border-width)를 정의합니다.

2.1. 선 색상: border-color 속성

이 속성들은 border-style로 지정된 테두리의 전경색을 설정합니다.

<image-1D>로 정의된 줄무늬는 적용된 쪽의 테두리 모양을 따라가며, padding edge에서 시작해 바깥쪽으로 띠(band) 형태로 그려집니다. 각 지점의 테두리 두께는 해당 지점의 전체 줄무늬 두께를 정의합니다.

.foo {
  border: 30px solid;
  border-color: stripes(dodgerblue, skyblue) stripes(yellow, gold) stripes(lightgreen, limegreen) stripes(indianred, orange);
}

border-color는 네 개의 border-*-color 속성의 축약형입니다. 네 개의 값은 각각 위, 오른쪽, 아래, 왼쪽 테두리를 설정합니다. 왼쪽이 누락되면 오른쪽과 같으며, 아래가 누락되면 위와 같고, 오른쪽이 누락되면 역시 위와 같습니다. 이는 각 리스트 항목마다 개별적으로 처리됩니다.

flow-relative 속성인 border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color는 physical 속성인 border-top-color, border-bottom-color, border-left-color, border-right-color와 대응됩니다. 이 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이 두 개의 축약 속성은 각각 border-block-start-color & border-block-end-color 및 border-inline-start-color & border-inline-end-color를 설정합니다. 첫 번째 값은 start 쪽 색상을, 두 번째 값은 end 쪽 색상을 나타냅니다. 값이 하나만 주어지면, start와 end 양쪽 모두에 적용됩니다.

2.2. 선 패턴: border-style 속성

flow-relative 속성인 border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style는 physical 속성인 border-top-style, border-bottom-style, border-left-style, border-right-style와 대응됩니다. 이 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이 두 개의 축약 속성은 각각 border-block-start-style & border-block-end-style 및 border-inline-start-style & border-inline-end-style를 설정합니다. 첫 번째 값은 start 쪽 스타일을, 두 번째 값은 end 쪽 스타일을 나타냅니다. 값이 하나만 주어지면, start와 end 양쪽 모두에 적용됩니다.

2.3. 선 두께: border-width 속성

flow-relative 속성인 border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width는 physical 속성인 border-top-width, border-bottom-width, border-left-width, border-right-width와 대응됩니다. 이 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이 두 개의 축약 속성은 각각 border-block-start-width & border-block-end-width 그리고 border-inline-start-width & border-inline-end-width를 각각 설정합니다. 첫 번째 값은 start 쪽의 너비를, 두 번째 값은 end 쪽의 너비를 나타냅니다. 값이 하나만 주어지면, start와 end 양쪽 모두에 적용됩니다.

2.4. 테두리 축약 속성

flow-relative 속성인 border-block-start, border-block-end, border-inline-start, border-inline-end는 physical 속성인 border-top, border-bottom, border-left, border-right와 대응됩니다. 이 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이 두 개의 축약 속성은 각각 border-block-start & border-block-end 또는 border-inline-start & border-inline-end를 모두 동일한 스타일로 설정합니다.

3. 모서리

3.1. 모서리 크기: border-*-*-radius 속성

flow-relative 속성인 border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius는 physical 속성인 border-top-left-radius, border-bottom-left-radius, border-top-right-radius, border-bottom-right-radius와 대응됩니다. 이 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라지며, 첫 번째 start/end가 블록 축 쪽, 두 번째가 인라인 축 쪽(즉, 'border-block-inline-radius' 패턴)입니다.

3.2. 모서리 크기 축약형: border-radius 및 border-*-radius 축약 속성

3.2.1. 한쪽 모서리 크기 지정: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius, border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius 축약형

border-*-radius 축약형은 관련 면의 두 개 border-*-*-radius 롱핸드 속성을 설정합니다. 슬래시 앞뒤로 값이 주어지면, 앞의 값은 수평 반지름, 슬래시 뒤의 값은 수직 반지름을 지정합니다. 슬래시가 없으면 두 반지름 모두 동일하게 지정됩니다. 두 반지름 값은 각각 border-top-radius의 경우 왼쪽 위, 오른쪽 위, border-right-radius의 경우 오른쪽 위, 오른쪽 아래, border-bottom-radius의 경우 왼쪽 아래, 오른쪽 아래, border-left-radius의 경우 왼쪽 위, 왼쪽 아래, border-block-start-radius의 경우 start-start, start-end, border-block-end-radius의 경우 end-start, end-end, border-inline-start-radius의 경우 start-start, end-start, border-inline-end-radius의 경우 start-end, end-end 순서입니다. 두 번째 값이 생략되면 첫 번째 값을 복사합니다.

3.2.2. 모든 모서리 크기 한 번에 지정: border-radius 축약형

[CSS3BG] 참고.

3.3. 모서리 모양: corner-shape 속성

기본적으로, 0이 아닌 border-radius 값은 해당 모서리를 둥글게 만드는 사분원 타원 모서리 모양을 정의하며, 모서리 영역 안을 border-radius가 정의한 영역에 채웁니다. 하지만 경우에 따라 다른 모서리 모양이 필요할 수 있습니다. corner-shape 속성(및 그 롱핸드 속성들)은 박스가 해당 border-radius 값으로 정의된 영역에 사용할 모서리 모양을 정확히 지정합니다.

다양한 모서리 모양은 모두 superellipse의 다양한 매개변수로 표현할 수 있습니다. superellipse는 타원을 일반화한 형태로, k 매개변수에 따라 정사각형, 타원, 노치 등 다양한 모양을 표현할 수 있습니다.

완전한 표현과 보간을 위해, corner-shape 속성들은 superellipse 매개변수를 직접 superellipse() 함수로 지정하거나, 자주 쓰이는 매개변수에 해당하는 키워드를 사용할 수 있습니다. 자세한 내용은 <corner-shape-value> 정의를 참고하세요.

3.3.1. corner-shape 축약형

corner-shape 속성은 border-radius로 지정된 영역 내에서 박스의 모서리 모양을 지정합니다.

<corner-shape-value> = round | scoop | bevel | notch | square | squircle |
                       <superellipse()>
superellipse() = superellipse(<number [-∞,∞]> | infinity | -infinity)

round

모서리 모양이 볼록 타원의 1/4입니다. superellipse(1)과 동일합니다.

참고: 이것이 corner-shape 속성의 초기값이며, corner-shape이 없던 border-radius의 기본 동작과 같습니다.

squircle

모서리 모양이 "squircle"의 1/4로, round와 square 사이의 볼록 곡선입니다. superellipse(2)와 동일합니다.

square

모서리 모양이 볼록한 90도 각입니다. superellipse(infinity)과 동일합니다.

참고: 이것은 border-radius: 0에서 얻는 "일반" 사각 모서리와 시각적으로 동일하지만, 다른 corner-shape 값들과 부드럽게 애니메이션할 수 있습니다.

bevel

모서리 모양이 직선 대각선(볼록도 오목도 아님)입니다. superellipse(0)과 동일합니다.

scoop

모서리 모양이 오목한 1/4 타원입니다. superellipse(-1)과 동일합니다.

notch

모서리 모양이 오목한 90도 각입니다. superellipse(-infinity)과 동일합니다.

superellipse(K)

모서리 모양이 superellipse의 1/4입니다. 인자 K는 superellipse 매개변수이며, 2^K 지수로 superellipse를 정의합니다.

§ 3.3 모서리 모양: corner-shape 속성의 참고에서 superellipse의 수학적 정의와 K값이 의미하는 바를 볼 수 있습니다. § 3.3.3 모서리 모양 렌더링에서 superellipse 계산 및 렌더링의 정확한 내용을 참고하세요.

참고: border-radius가 지정되지 않았거나(혹은 0으로 설정되었을 때) 모서리 영역도 0 크기가 되며, corner-shape는 아무 영향도 주지 않습니다.

corner-shape는 overflow 규칙을 변경하지 않으며, 단지 모서리 모양만 다르게 할 뿐이고, 요소는 여전히 일반적으로 모양이 지정된 테두리로 클리핑됩니다.

corner-shape로 지정된 곡선은 테두리의 바깥쪽 경계를 정의합니다. 테두리의 안쪽 경계는 바깥쪽 경계를 따라가지만 (꼭 superellipse 곡선으로 표현된다고 할 수 없는 방식일 수도 있음), 전체적으로 거의 일정한 거리로 유지됩니다. (또는 만약 모서리에서 만나는 두 테두리의 border-width가 다르면 거리가 선형적으로 증가합니다.)

corner-shape는 box-shadow의 렌더링과, overflow clip edge가 박스에서 확장될 때의 모양에도 영향을 줍니다. 하지만 이들은 corner-shape 경로를 직접 따르지 않고, 대신 축 정렬 방식으로 corner-shape 경로를 스케일합니다.

3.3.2. corner-*-shape 축약형 및 롱핸드

corner-*-*-shape 롱핸드 속성은 지정된 모서리의 모양을 설정합니다.

flow-relative 롱핸드 (corner-start-start-shape 등) 는 physical 롱핸드 (corner-top-left-shape 등) 와 대응되며, 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다. 첫 번째 start/end가 블록 축 쪽, 두 번째가 인라인 축 쪽입니다 (즉, corner-block-inline-shape 패턴).

corner-*-shape 등 축약형은 관련 면의 두 corner-*-*-shape 속성을 설정합니다. 값이 하나만 주어지면 두 번째 값은 첫 번째 값을 기본값으로 사용합니다.

물리적 축약형(corner-top-shape 등)의 경우, 값은 왼쪽/오른쪽 또는 위/아래 순서로 지정되며, 해당 속성에 의미 있는 축에 따라 다릅니다. 즉, corner-top-shape: round square는 corner-top-left-shape: round; corner-top-right-shape: square;를 설정합니다.

논리 축약형(corner-block-start-shape 등)의 경우, 값은 항상 다른 축에서 start/end 순서입니다. 즉, corner-block-start-shape: round square는 corner-start-start-shape: round; corner-start-end-shape: square;를 설정합니다.

3.3.3. corner-shape 렌더링

모서리 모양이 지정된 요소를 렌더링할 때, 요소의 경로는 border, outline, box-shadow, overflow-clip-margin 등 다양한 요소에 따라 오프셋되어야 합니다.

테두리(border)나 외곽선(outline)을 렌더링할 때는 오프셋이 요소의 곡선에 맞춰 정렬되고, box-shadow나 overflow-clip-margin으로 오프셋할 때는 축에 맞춰 정렬됩니다.

element element의 외곽선(outer contour)은 element와 element의 border edge로 결정되는 border contour path입니다.

element element의 내곽선(inner contour)은 element와 element의 padding edge로 결정되는 border contour path입니다.

element의 border는 외곽선과 내곽선 사이 영역에 렌더링됩니다.

element의 outline은 외곽선을 따라 used outline-width 및 outline-offset으로 렌더링됩니다. 실제 렌더링 방법은 구현체에 따라 다를 수 있습니다.

element의 overflow 영역은 내곽선에 의해 모양이 정해집니다. element의 overflow clip edge는 element, element의 padding edge, element의 used overflow-clip-margin으로 결정되는 border contour path에 의해 결정됩니다.

element의 각 'box shadow' 그림자는, element, element의 border edge, 그리고 그림자의 used box-shadow-spread로 결정되는 border contour path에 의해 모양이 정해집니다.

3.3.4. 대각선 반지름 제약

오목한 corner-shape 값(즉, superellipse parameter가 음수)일 경우, 대각선 방향의 모서리가 서로 겹칠 수 있습니다.

div {
  corner-shape: scoop;
  border-top-left-radius: 80%;
  border-bottom-right-radius: 80%;
}

이를 방지하기 위해 네 개의 반지름(radii)은 서로 겹치지 않도록 제약됩니다. 이는 반대쪽 모서리마다 외곽 다각형(hull polygon)을 계산하고, 두 모서리에 동일하게 적용할 수 있는 최대 축소 비율을 찾아 이 다각형들이 교차하지 않도록 조정하여 구현합니다.

3.3.5. 모서리 모양 보간

<corner-shape-value>는 항상 superellipse()와 그 superellipse parameter 변수로 표현할 수 있으므로, 두 <corner-shape-value> 사이의 보간은 superellipse parameter 자체를 보간하여 수행합니다. 이때 log2를 사용하기 때문에, 선형 보간을 하면 오목한 모서리는 볼록한 모서리보다 훨씬 빠르게 변화하는 효과가 나타납니다. 이를 보정하기 위해 superellipse 보간 수식은 superellipse parameter를 0~1 사이 값으로 변환하거나 그 반대로 변환하는 방법을 설명합니다:

superellipse parameter s를 0과 1 사이의 보간 값으로 변환하려면, normalized superellipse half corner에서 s를 사용해 구한 값을 반환합니다.

3.4. 모서리 모양 축약형: corners 속성

이 속성의 정확한 이름과 문법을 결정해야 합니다. [Issue #11623]

4. 부분 테두리

CSS 테두리는 전통적으로 전체 테두리 라인을 그리지만, 경우에 따라 테두리의 일부만 숨기는 것이 유용할 수 있습니다.

이를 위한 두 가지 제안이 있습니다: 두 번째는 GCPM에서, 첫 번째는 더 읽기 쉽게 재구성하려는 시도입니다. 명칭이 좋지 않은 것은 인지된 문제이며, 제안 환영합니다. 클리핑 개념으로 생각할 때 문제가 있습니다: 점선 테두리라면 점 전체가 항상 보여야 하며, 점 일부만 나타나면 안 됩니다. 따라서 클리핑이 아니라 드로잉 제한이어야 합니다.

4.1. 부분 테두리: border-limit 속성

기본적으로 전체 테두리가 그려집니다. 하지만 테두리 렌더링을 일부만 제한할 수도 있습니다. 키워드는 어느 부분을 제한할지, 길이나 백분율은 어느 정도까지 제한할지를 지정합니다.

all

전체 테두리가 그려집니다.

sides

각 면의 중앙에서부터 지정된 길이(또는 백분율)만큼만 표시되고, 코너(테두리 반지름으로 정의)는 포함하지 않습니다. 예를 들어 50%는 중앙 50%만 그립니다. 기본값은 전체 면을 그립니다.

corners

모서리와(필요시) 면의 일부만 그립니다. 길이는 모서리 영역 가장자리부터, 백분율은 border box의 절대 모서리부터 측정됩니다.

left

right

좌/우(수직) 면은 전체 면과 코너를 그립니다. 상/하(수평) 면은 좌/우 부분만(지정된 대로) 그립니다. 거리는 corners와 동일하게 측정합니다.

top

bottom

상/하(수평) 면은 전체 면과 코너를 그립니다. 좌/우(수직) 면은 상/하 부분만(지정된 대로) 그립니다. 거리는 corners와 동일하게 측정합니다.

div {
  border: solid;
  border-limit: sides 50%;
}

div {
  border: solid;
  border-radius: 1em 2em;
  border-limit: corners;
}

div {
  border-top: solid;
  border-limit: left 4em;
}

div {
  border: solid;
  border-limit: corners 10px;
}

div {
  border: solid;
  border-radius: 5px;
  border-limit: corners 5px;
}

div {
  border: solid;
  border-radius: 5px;
  border-limit: corners 30%;
}

4.2. border-clip 속성

이 속성들은 해당 테두리를 border edge를 따라 여러 부분으로 나눕니다. 첫 번째 구간은 표시되고, 두 번째는 숨겨지며, 세 번째는 표시되고, ... 이런 식으로 반복합니다. 각 부분은 길이, 백분율, 또는 fr 단위(즉, [CSS3GRID] 참고)로 지정할 수 있습니다. normal 값은 분할하지 않고 일반적으로 테두리를 표시합니다.

border-clip은 네 개의 개별 속성의 축약형입니다.

지정된 부분이 테두리보다 짧으면, 남은 테두리는 지정된 flexible 길이 비율로 나뉩니다. flexible 길이가 없다면 마지막에 1fr이 추가된 것처럼 동작합니다.

지정된 부분이 테두리보다 길면, 지정된 부분이 다 그려진 뒤 남은 테두리는 그려지지 않습니다. 이 경우 flexible 길이는 0이 됩니다.

수평 테두리는 왼쪽에서 오른쪽, 수직 테두리는 위에서 아래로 부분을 나열합니다.

정확한 border 부분은 지정된 border 부분을 flexible 길이 0으로 두고 레이아웃한 뒤, 남은 부분을 flexible 길이 비율로 나누어 결정합니다.

border-clip: 10px 1fr 10px;

border-clip-top: 10px 1fr 10px;
border-clip-bottom: 10px 1fr 10px;
border-clip-right: 5px 1fr 5px;
border-clip-left: 5px 1fr 5px;

border-clip-top: 0 10px 1fr 10px;
border-clip-bottom: 0 10px 1fr 10px;
border-clip-right: 0 5px 1fr 5px;
border-clip-left: 0 5px 1fr 5px;

border: thin solid black;
border-clip: 0 1fr; /* 테두리 숨김 */
border-clip-top: 10px 1fr 10px; /* 특정 테두리만 보이게 */
border-clip-bottom: 10px 1fr 10px;

border-top: thin solid black;
border-bottom: thin solid black;
border-clip-top: 10px;
border-clip-bottom: 10px;

border-top: thin solid black;
border-clip: 10px;

A sentence consists of words¹.

¹ Most often.

@footnote {
  border-top: thin solid black;
  border-clip: 4em;
}

border: 4px solid black;
border-clip-top: 40px 20px 0 1fr 20px 20px 0 1fr 40px;

border: 4px solid black;
border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;

5. 그림자 효과

5.1. 그림자 색상: box-shadow-color 속성

box-shadow-color 속성은 하나 이상의 그림자 색상을 정의합니다. 속성 값은 쉼표로 구분된 그림자 색상 목록을 허용합니다.

“계층, 레이아웃 및 기타 세부사항” 섹션을 참고하여, box-shadow-color가 쉼표로 구분된 다른 그림자 속성과 어떻게 상호작용하여 각 그림자 계층을 만드는지 확인할 수 있습니다.

5.2. 그림자 오프셋: box-shadow-offset 속성

box-shadow-offset 속성은 하나 이상의 그림자 오프셋을 정의합니다. 속성 값은 쉼표로 구분된 리스트를 허용합니다. 각 항목은 none 값(즉, 그림자 없음) 또는 수평 및 수직 오프셋 쌍(<length>)으로 지정할 수 있습니다.

none

그림자가 렌더링되지 않습니다. 이 그림자에 대응하는 다른 box-shadow 속성 값은 무시됩니다.

1st <length>

그림자의 수평 오프셋을 지정합니다. 양수는 박스 오른쪽, 음수는 왼쪽으로 그림자를 그립니다.

2nd <length>

그림자의 수직 오프셋을 지정합니다. 양수는 아래쪽, 음수는 위쪽으로 그림자를 오프셋합니다.

“계층, 레이아웃 및 기타 세부사항” 섹션을 참고하여, box-shadow-offset가 쉼표로 구분된 다른 그림자 속성과 어떻게 상호작용하여 각 그림자 계층을 만드는지 확인할 수 있습니다.

5.3. 그림자 흐림 효과: box-shadow-blur 속성

box-shadow-blur 속성은 하나 이상의 그림자 흐림 반지름을 정의합니다. 속성 값은 쉼표로 구분된 <length> 값 목록입니다.

음수 값은 허용되지 않습니다. 흐림 값이 0이면 그림자 가장자리가 날카롭습니다. 값이 클수록 그림자 가장자리가 더 흐릿해집니다. 아래 Shadow Blurring 참고.

“계층, 레이아웃 및 기타 세부사항” 섹션을 참고하여, box-shadow-blur가 쉼표로 구분된 다른 그림자 속성과 어떻게 상호작용하여 각 그림자 계층을 만드는지 확인할 수 있습니다.

5.4. 그림자 확장: box-shadow-spread 속성

box-shadow-spread 속성은 하나 이상의 그림자 확장 거리를 정의합니다. 속성 값은 쉼표로 구분된 <length> 값 목록입니다.

양수 값은 그림자를 모든 방향으로 지정한 반지름만큼 확장합니다. 음수 값은 그림자를 축소합니다. 아래 Shadow Shape 참고.

내부 그림자의 경우, 그림자 영역이 확장(즉, 더 많은 그림자 면적 생성)되면 그림자 외곽 모양은 오히려 축소됩니다.

“계층, 레이아웃 및 기타 세부사항” 섹션을 참고하여, box-shadow-spread가 쉼표로 구분된 다른 그림자 속성과 어떻게 상호작용하여 각 그림자 계층을 만드는지 확인할 수 있습니다.

5.5. 그림자 위치: box-shadow-position 속성

box-shadow-position 속성은 하나 이상의 그림자 위치를 정의합니다. 속성 값은 쉼표로 구분된 outset과 inset 키워드 목록을 허용합니다.

outset

그림자를 외부 box-shadow로 만듭니다. 즉, 요소가 캔버스 위로 떠 있는 것처럼 상자를 캔버스에 그림자로 투영합니다.

inset

그림자를 내부 box-shadow로 만듭니다. 즉, 박스가 캔버스에서 오려져 뒤로 밀린 것처럼, 캔버스가 박스에 그림자로 투영됩니다.

“계층, 레이아웃 및 기타 세부사항” 섹션을 참고하여, box-shadow-position이 쉼표로 구분된 다른 그림자 속성과 어떻게 상호작용하여 각 그림자 계층을 만드는지 확인할 수 있습니다.

5.6. 그림자 축약형: box-shadow 속성

box-shadow 속성은 박스에 하나 이상의 그림자 효과를 부착합니다. 속성 값은 앞에서부터 뒤로(Front to Back) 쌓이는 그림자들의 쉼표로 구분된 리스트입니다.

각 그림자는 <spread-shadow>로 지정되며, box-shadow-offset와, box-shadow-blur, box-shadow-spread, box-shadow-color, box-shadow-position의 선택적 값을 포함합니다. 길이가 생략되면 0으로 간주되고, 색상이 생략되면 offset이 none일 때 transparent로, 그 외에는 currentcolor로 처리됩니다.

<spread-shadow> = <'box-shadow-color'>? && [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] && <'box-shadow-position'>?

5.7. 계층화, 레이아웃 및 기타 세부 사항

그림자 효과는 box-shadow-* 속성으로 구성된 coordinated value list에서 선언되며, coordinating list property group을 형성합니다. 이때 box-shadow-offset이 coordinating list base property입니다. CSS Values 4 § A Coordinating List-Valued Properties 참고.

그림자 효과는 앞에서부터 뒤로(front-to-back) 적용됩니다: 첫 번째 그림자가 맨 위에, 다른 그림자들은 그 아래에 쌓입니다. 그림자는 레이아웃에 영향을 주지 않으며, 다른 박스나 텍스트 또는 그 그림자와 겹칠 수도 있습니다. 쌓임 맥락(stacking context) 및 페인팅 순서상, 요소의 외부 box-shadow는 그 요소의 배경 바로 아래에 그려지며, 내부 그림자는 배경 바로 위(테두리 및 border-image 아래)에서 그려집니다.

별다른 명시가 없다면, 그림자 효과는 주요 박스(principal box)에만 적용됩니다. 영향받는 박스에 여러 조각(fragment)이 있으면, box-decoration-break 명세에 따라 그림자가 적용됩니다.

그림자는 스크롤을 유발하거나 스크롤 영역을 늘리지 않습니다.

외부 그림자는 collapsing border model에서 내부 테이블 요소에 영향을 주지 않습니다. 하나의 border edge에 대해 여러 테두리 두께가 있는 collapsing border model(예: 특정 행만 테두리가 두꺼운 테이블, 또는 인접 셀의 테두리 두께가 다른 rowspanning 셀)에 그림자가 정의된 경우, 그림자의 정확한 위치·렌더링은 정의되어 있지 않습니다.

6. 테두리 모양

corner-shape와 border-radius가 테두리 스타일링의 표현력을 제공하긴 하지만, 여전히 테두리가 사각형이라는 전제에 기반합니다.

border-shape 함수는 작성자가 임의의 기본 도형을 사용하여 테두리 경로를 지정할 수 있게 하여 이 기능을 확장합니다.

6.1. border-shape 속성

border-shape 속성은 단일 <basic-shape> 또는 두 개의 <basic-shape> 값을 받을 수 있으며, 각각 하나 또는 두 개의 경로(path)를 생성합니다. 단일 경로 border-shape는 기존 border 속성으로 그 경로를 따라 테두리를 그리며, 두 경로 border-shape는 두 경로 사이의 영역을 테두리처럼 채웁니다.

border-shape 속성은 border-radius 및 corner-shape와 호환되지 않습니다. 요소의 computed value의 border-shape가 none이 아니면, border-radius는 0으로 간주되어 무시되고, corner-shape도 마찬가지로 무시됩니다(이는 border-radius와 함께 동작할 때만 사용 가능하기 때문입니다).

box-shadow는 내부/외부 테두리 경로 모두를 따릅니다.

border-shape는 도형이나 레이아웃에는 영향을 주지 않으며, 기존 border-width 속성으로 계산됩니다.

border-shape는 박스 내부의 콘텐츠 흐름에는 영향을 주지 않습니다. 참고: 작성자는 border-shape와 shape-inside를 함께 사용하여 박스를 장식하면서 동시에 텍스트 흐름을 제어할 수 있습니다.

내부 border-shape는 요소의 overflow 콘텐츠를 border-radius와 동일한 방식으로 자릅니다. 자세한 내용은 corner clipping을 참고하세요.

대체(replaced) 요소 클리핑에 어떤 영향을 줘야 하는지?

채우기/선 색상 및 선 두께는 각각 border-color와 border-width 속성에서 가져옵니다.

자세한 정의가 필요합니다. 덮어쓸 수 있게 해야 할까요?

border-style은 임의의 도형에 대해서는 어떻게 동작해야 할까요? 완전히 동작할 수 없음.

개인정보 고려사항

이 명세에 대해 새로운 개인정보 관련 고려사항은 보고되지 않았습니다.

보안 고려사항

이 명세에 대해 새로운 보안 관련 고려사항은 보고되지 않았습니다.

변경사항

[CSS3BG] 이후 추가사항

• <image-1D>이 border-color 및 해당 롱핸드의 값으로 추가됨

• 물리적 및 논리적 border-*-radius 축약형 추가

• corner-shape 및 corner-*-shape 축약형 추가, 관련 corners 축약형 포함

• border-shape 추가

• 부분 테두리를 border-limit 및 border-*-clip 속성으로 추가

• box-shadow-* 롱핸드 추가 및 box-shadow를 축약형으로 변경

• 논리적 border 속성들을 [CSS-LOGICAL-1]에서 이 명세로 이동

감사의 글

이 모듈의 선행 명세인 [CSS1], [CSS21], 및 [CSS3BG]의 많은 기여자들 외에도, 편집자들은 이 Level 4를 위해 특별히 제안과 피드백을 주신 Tab Atkins, Noam Rosenthal, Håkon Wium Lie, 그리고 Oriol Brufau에게 감사를 표합니다.