CSS 배경 및 테두리 모듈 레벨 3

1. 소개

이 하위 섹션은 규범적이지 않습니다.

요소가 CSS 박스 모델 [CSS-BOX-3]에 따라 렌더링될 때, 각 요소는 완전히 표시되지 않거나, 하나 이상의 사각형 박스로 포맷됩니다. 각 박스는 사각형 콘텐츠 영역, 콘텐츠 주위의 패딩 띠, 패딩 주위의 테두리, 그리고 테두리 바깥의 마진을 가집니다. (마진은 실제로 음수일 수 있지만, 마진은 배경과 테두리에 영향을 주지 않습니다.)

이 모듈의 속성들은 테두리 영역의 장식과 콘텐츠, 패딩, 그리고 테두리 영역의 배경을 다룹니다. 추가적으로 박스는 box-shadow 속성으로 "드롭 쉐도우" 효과를 줄 수 있습니다.

요소가 여러 박스 프래그먼트로 분할되는 경우, box-decoration-break [CSS-BREAK-3]는 테두리와 배경이 다양한 프래그먼트에 어떻게 나누어지는지 정의합니다. (요소가 줄 끝, 열 끝 또는 페이지 끝에서 분할되어 다음 줄, 열, 페이지에서 계속될 때 하나 이상의 프래그먼트가 생성될 수 있습니다.)

배경, 테두리, 그림자의 상대적인 쌓임 순서는 이 모듈에 제시되어 있습니다. 이러한 레이어가 다른 렌더링된 콘텐츠와 어떻게 상호작용하는지에 대해서는 부록 E "쌓임 컨텍스트의 상세 설명"을 [CSS2]에서 참고하세요.

1.1. 모듈 상호작용

이 모듈은 [CSS2] 8.5 및 14.2절에서 정의된 배경 및 테두리 기능을 대체하고 확장합니다.

이 모듈의 모든 속성은 ::first-letter 의사 요소에 적용됩니다. 배경 속성과 border-radius 속성은 ::first-line 의사 요소에도 적용됩니다. UA는 (필수는 아니지만) border-image 또는 box-shadow 속성을 ::first-line에 적용할 수 있습니다. UA는 border-color/style/width 속성을 ::first-line에 적용해서는 안 됩니다. [CSS2]

1.2. 값 정의

이 규격은 CSS 속성 정의 규약을 [CSS2]에서 따르며, 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 규격에서 정의되지 않은 값 타입들은 CSS Values & Units [CSS-VALUES-3]에서 정의되어 있습니다. 다른 CSS 모듈과 조합하면 이러한 값 타입의 정의가 확장될 수 있습니다. 예를 들어, CSS Images와 결합하면 CSS 그라디언트를 background-image 또는 border-image 값으로 사용할 수 있습니다. [CSS-IMAGES-3]

정의에 나열된 속성별 값 외에도, 이 규격에서 정의된 모든 속성은 CSS-범용 키워드를 속성 값으로 허용합니다. 가독성을 위해 명시적으로 반복하지 않았습니다.

2. 배경

각 박스에는 배경 레이어가 있으며, 완전히 투명(기본값)하거나 색상 및 하나 이상의 이미지를 채울 수 있습니다. 배경 속성은 사용할 색상(background-color) 및 이미지(background-image), 그리고 그것들이 어떻게 크기 조정, 위치 지정, 타일링되는지 등을 지정합니다.

배경 속성은 상속되지 않지만, 부모 박스의 배경은 기본적으로 투명 값이 background-color의 초기값이기 때문에 비칩니다.

2.1. 여러 배경 이미지 레이어링

박스의 배경은 여러 개의 배경 이미지 레이어를 가질 수 있습니다. 레이어의 개수는 background-image 속성의 쉼표로 구분된 값의 개수로 결정됩니다. none 값도 레이어를 생성한다는 점에 유의하세요.

각 배경 이미지는 다른 배경 속성의 해당 값에 따라 크기, 위치, 타일링이 결정됩니다. 리스트는 첫 번째 값부터 맞춰집니다: 마지막에 남는 값들은 사용되지 않습니다. 속성이 레이어 수만큼 쉼표로 구분된 값이 부족한 경우, UA는 값을 반복하여 충분히 맞춰 사용된 값을 계산해야 합니다.

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

리스트의 첫 번째 이미지는 사용자와 가장 가까운 레이어이고, 그 다음 이미지는 첫 번째 뒤에 그려지며, 그 다음도 마찬가지입니다. 배경 색상이 있으면 모든 레이어 아래에 그려집니다.

참고: border-image 속성 역시 배경 이미지를 정의할 수 있으며, 이 경우 해당 이미지는 배경 속성으로 생성된 배경 레이어 위에 그려집니다.

2.2. 기본 색상: background-color 속성

이 속성은 박스의 배경 색상을 설정합니다. 이 색상은 모든 배경 이미지 뒤에 그려집니다.

h1 { background-color: #F00 } /* 배경을 빨간색으로 설정 */

배경 색상은 가장 아래 background-clip 값에 따라 배경 이미지 레이어에 맞게 클리핑됩니다.

2.3. 이미지 소스: background-image 속성

이 속성은 요소의 배경 이미지를 지정합니다. 이미지는 처음 지정된 것이 맨 위(사용자에게 가장 가까움)에 그려지고, 그 다음 이미지는 앞의 이미지 뒤에 그려집니다. 속성 값은 쉼표로 구분된 <bg-image> 값 리스트로 주어집니다.

<bg-image> = <image> | none

none 값은 배경 이미지 레이어로 취급되지만 아무것도 그리지 않습니다. 이미지가 비어있거나(폭 또는 높이가 0), 다운로드에 실패하거나, 표시할 수 없는 경우 (예: 지원하지 않는 이미지 형식 등) 역시 레이어로 취급되지만 아무것도 그리지 않습니다.

§ 2.1 여러 배경 이미지 레이어링을 참고하여 background-image가 다른 쉼표로 구분된 배경 속성과 어떻게 상호작용하는지, 각 배경 이미지 레이어를 형성하는지 확인하세요.

배경 이미지를 설정할 때, 작성자는 이미지가 사용 불가할 때에도 텍스트와의 대비를 유지할 수 있도록 background-color도 지정해야 합니다.

접근성 측면에서, 작성자는 중요한 정보를 전달하는 유일한 방법으로 배경 이미지를 사용하지 않아야 합니다. 웹 콘텐츠 접근성 지침 F3 [WCAG20]을 참고하세요. 이미지는 비그래픽 프레젠테이션에서는 접근할 수 없으며, 특히 배경 이미지는 고대비 모드 등에서 꺼질 수 있습니다.

참고: 스타일용 전경 이미지는 CSS에서 content 속성으로 제공할 수 있습니다. 의미적으로 중요한 전경 이미지는 문서 마크업(예: HTML의 <img> 태그)으로 제공되어야 합니다.

참고: 미디어 프래그먼트를 사용하면 이미지의 일부만 표시할 수 있습니다. CSS Images 모듈은 이미지 형식에 대한 폴백 문법과 이미지 표시를 위한 추가 제어 기능을 제공합니다.

html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }

구현체는 보이지 않는 이미지(예: 다른 불투명한 이미지 뒤에 있을 때)는 다운로드 및 그리기를 생략하여 최적화할 수 있습니다.

2.4. 이미지 타일링: background-repeat 속성

이 속성은 배경 이미지가 크기 조정 및 위치 지정된 후 어떻게 타일링되는지 지정합니다. 속성 값은 쉼표로 구분된 <repeat-style> 값의 리스트로 주어집니다.

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

<repeat-style>의 단일 값 의미:

repeat-x

repeat no-repeat으로 계산됩니다.

repeat-y

no-repeat repeat으로 계산됩니다.

repeat

repeat repeat으로 계산됩니다.

space

space space으로 계산됩니다.

round

round round으로 계산됩니다.

no-repeat

no-repeat no-repeat으로 계산됩니다.

<repeat-style> 값이 두 키워드를 가지면, 첫 번째는 수평축에, 두 번째는 수직축에 적용됩니다:

repeat

이미지가 배경 그리기 영역을 덮을 만큼 반복됩니다.

space

이미지가 배경 위치 지정 영역 내에 잘리지 않게 최대한 반복되고, 이후 이미지는 영역을 채우도록 균등하게 배치됩니다. 첫 번째와 마지막 이미지는 영역의 끝에 닿습니다. 배경 그리기 영역이 배경 위치 지정 영역보다 크면, 패턴이 배경 그리기 영역을 채울 때까지 반복됩니다. 해당 방향의 background-position 값은 이미지가 두 번 이상 배치될 공간이 없을 때만 사용되며, 이 경우 이미지는 한 번만 배치되고 background-position이 위치를 결정합니다.

round

이미지가 배경 위치 지정 영역 내에 최대한 반복됩니다. 정수 배수로 맞지 않으면 크기가 조정되어 맞춰집니다. background-size 항목의 공식 참고. 배경 그리기 영역이 위치 지정 영역보다 크면, 패턴이 배경 그리기 영역을 채울 때까지 반복됩니다.

no-repeat

이미지가 한 번만 배치되고 해당 방향으로 반복되지 않습니다.

두 키워드 중 하나가 no-repeat이 아니면, 전체 배경 그리기 영역이 타일링됩니다. 즉, 한 줄이나 한 열만 타일링하는 것이 아닙니다.

body {
  background: white url("pendant.png");
  background-repeat: repeat-y;
  background-position: center;
}

body {
  background-image: url(dot.png) white;
  background-repeat: space
}

§ 2.1 여러 배경 이미지 레이어링을 참고하여 background-repeat가 다른 쉼표로 구분된 배경 속성과 어떻게 상호작용하여 각 배경 이미지 레이어를 구성하는지 확인하세요.

2.5. 이미지 고정: background-attachment 속성

배경 이미지가 지정된 경우, 이 속성은 이미지가 뷰포트(fixed)에 고정되어 있는지, 박스와 함께 스크롤되는지(scroll), 혹은 콘텐츠와 함께 스크롤되는지(local)를 지정합니다. 속성 값은 쉼표로 구분된 <attachment> 키워드 리스트로 주어집니다.

<attachment> = scroll | fixed | local

fixed

배경은 뷰포트에 대해 고정됩니다. 페이지 미디어에서 뷰포트가 없는 경우, fixed 배경은 페이지 박스에 대해 고정되므로 모든 페이지에 복제됩니다.

참고: 하나의 뷰포트만 존재합니다. 박스가 스크롤 컨테이너여도, fixed 배경은 박스와 함께 이동하지 않습니다.

local

배경은 박스의 콘텐츠를 기준으로 고정됩니다: 박스에 스크롤 메커니즘이 있으면 배경은 콘텐츠와 함께 스크롤되고, 배경 그리기 영역과 배경 위치 지정 영역은 테두리가 아닌 스크롤 가능한 오버플로우 영역을 기준으로 합니다. 스크롤 가능한 오버플로우 영역에는 테두리 영역이 포함되지 않으므로, 스크롤 컨테이너의 경우 border-box 값은 padding-box와 동일하게 처리될 수 있습니다.

scroll

배경은 박스 자체에 대해 고정되며, 콘텐츠와 함께 스크롤되지 않습니다. (실질적으로 박스의 테두리에 붙어 있습니다.)

이미지가 고정되어 있어도, 박스의 배경 그리기 영역 또는 클리핑되지 않은 경우에만 보입니다. (§ 2.11 특수 요소의 배경에서 배경 이미지가 클리핑되지 않는 경우를 참고하세요.) 따라서 이미지가 타일링되지 않으면 보이지 않을 수 있습니다.

body {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

참고: fixed 배경을 지원하지 않는 UA (예: 하드웨어 플랫폼의 제한 등)은 fixed 키워드가 있는 선언을 무시합니다. 예시:

body {
  /* 모든 UA용: */
  background: white url(paper.png) scroll;
  /* fixed 배경을 지원하는 UA용: */
  background: white url(ledger.png) fixed;
}
h1 {
  /* 모든 UA용: */
  background: silver;
  /* fixed 배경을 지원하는 UA용: */
  background: url(stripe.png) fixed, white url(ledger.png) fixed;
}

§ 2.1 여러 배경 이미지 레이어링을 참고하여 background-attachment가 다른 쉼표로 구분된 배경 속성과 어떻게 상호작용하여 각 배경 이미지 레이어를 구성하는지 확인하세요.

2.6. 이미지 위치 지정: background-position 속성

배경 이미지가 지정된 경우, 이 속성은 각 이미지의 크기 조정 이후 해당 배경 위치 지정 영역 내에서의 초기 위치를 지정합니다.

속성 값은 쉼표로 구분된 <bg-position> 값의 리스트로 주어집니다.

<bg-position> = [
  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]
|
  [ center | [ left | right ] <length-percentage>? ] &&
  [ center | [ top | bottom ] <length-percentage>? ]
]

값이 하나만 지정되면, 두 번째 값은 center로 간주됩니다. 값이 두 개이면, 첫 번째 <length-percentage>는 수평 위치(또는 오프셋)를 나타내며, 두 번째 <length-percentage>는 수직 위치(또는 오프셋)를 나타냅니다. 여기서 <length-percentage> 값은 배경 이미지의 좌상단이 배경 위치 지정 영역의 좌상단에서 얼마나 떨어져 있는지 오프셋을 의미합니다.

참고: 키워드 쌍은 순서를 바꿀 수 있지만, 키워드와 길이 또는 백분율의 조합은 순서 변경이 불가능합니다. 따라서 center left는 유효하지만 50% left는 유효하지 않습니다.

값이 세 개 또는 네 개이면, 각 <length-percentage>는 오프셋을 의미하며, 반드시 키워드 앞에 위치해야 하며, 키워드는 오프셋 기준이 되는 가장자리(edge)를 지정합니다. 예를 들어, background-position: bottom 10px right 20px는 10px 아래에서 위로(수직), 20px 오른쪽에서 왼쪽으로(수평) 오프셋을 의미합니다. 값이 세 개면, 누락된 오프셋은 0으로 간주합니다.

양수 값은 배경 위치 지정 영역의 가장자리에서 안쪽으로의 오프셋을 의미합니다. 음수 값은 배경 위치 지정 영역의 가장자리에서 바깥쪽으로의 오프셋을 의미합니다.

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

<percentage>

수평 오프셋에 대한 백분율은 (배경 위치 지정 영역의 너비 - 배경 이미지의 너비)에 상대적입니다. 수직 오프셋에 대한 백분율은 (배경 위치 지정 영역의 높이 - 배경 이미지의 높이)에 상대적입니다. 이미지의 크기는 background-size로 지정된 크기입니다.

예를 들어 값 쌍이 0% 0%이면, 이미지의 좌상단이 보통 박스의 padding edge의 좌상단에 정렬됩니다. 값 쌍이 100% 100%이면, 이미지의 우하단이 영역의 우하단에 위치합니다. 값 쌍이 75% 50%이면, 이미지의 75% 지점과 50% 지점이 영역의 75% 지점과 50% 지점에 맞춰집니다.

<length>

길이 값은 오프셋을 고정 길이로 지정합니다. 예를 들어 값 쌍이 2cm 1cm이면, 이미지의 좌상단이 배경 위치 지정 영역의 좌상단에서 오른쪽으로 2cm, 아래로 1cm에 위치합니다.

top

값이 하나 또는 두 개일 때 수직 위치에 대해 0%로 계산되며, 그 외에는 다음 오프셋의 기준을 top edge로 지정합니다.

right

값이 하나 또는 두 개일 때 수평 위치에 대해 100%로 계산되며, 그 외에는 다음 오프셋의 기준을 right edge로 지정합니다.

bottom

값이 하나 또는 두 개일 때 수직 위치에 대해 100%로 계산되며, 그 외에는 다음 오프셋의 기준을 bottom edge로 지정합니다.

left

값이 하나 또는 두 개일 때 수평 위치에 대해 0%로 계산되며, 그 외에는 다음 오프셋의 기준을 left edge로 지정합니다.

center

수평 위치가 별도로 지정되지 않으면 50%(left 50%)로 계산되고, 그렇지 않으면 수직 위치는 50%(top 50%)로 계산됩니다.

body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

background-position: right 3em bottom 10px

§ 2.1 여러 배경 이미지 레이어링을 참고하여 background-position이 다른 쉼표로 구분된 배경 속성과 어떻게 상호작용하여 각 배경 이미지 레이어를 구성하는지 확인하세요.

2.6.1. background-position 값의 직렬화

specified value와 computed value는 <bg-position> 타입에 대해 [CSS-VALUES-4]에서 <position>에 정의된 그대로 직렬화됩니다. 3값 생성식(이는 <position>에서는 유효하지 않음)의 경우, specified value 직렬화는 생략된 오프셋이 그대로 생략된다는 점만 빼면 동등한 4값 문법과 동일합니다.

2.7. 그리기 영역: background-clip 속성

배경 그리기 영역을 결정하며, 이는 배경이 그려지는 영역을 의미합니다. 값의 의미는 다음과 같습니다:

border-box

배경은 테두리 박스 내에서 (클리핑되어) 그려집니다.

padding-box

배경은 패딩 박스 내에서 (클리핑되어) 그려집니다.

content-box

배경은 콘텐츠 박스 내에서 (클리핑되어) 그려집니다.

참고: 루트 요소는 배경 그리기 영역이 다르므로, background-clip 속성은 루트 요소에 지정해도 효과가 없습니다. § 2.11 특수 요소의 배경 참고.

참고: 배경은 항상 테두리(있는 경우) 뒤에 그려집니다. [CSS2] 부록 E의 "쌓임 컨텍스트의 상세 설명" 참고.

§ 4.2 모서리 형태 지정을 참고하여 border-radius가 배경 그리기 영역의 형태에 어떻게 영향을 주는지 확인하세요.

§ 2.1 여러 배경 이미지 레이어링을 참고하여 background-clip이 다른 쉼표로 구분된 배경 속성과 어떻게 상호작용하여 각 배경 이미지 레이어를 구성하는지 확인하세요.

2.8. 위치 지정 영역: background-origin 속성

이 속성은 배경 위치 지정 영역을 결정합니다: 배경 이미지가 위치 지정되는 영역입니다. 여러 박스 프래그먼트로 렌더링된 요소(예: 여러 줄에 걸친 인라인 박스, 여러 페이지의 박스)에서, 어느 박스에 box-decoration-break [CSS-BREAK-3]가 적용되어 배경 위치 지정 영역을 결정하는지 지정합니다.

padding-box

위치는 패딩 박스 기준입니다. (단일 박스의 경우 0 0은 패딩 에지의 좌상단, 100% 100%은 우하단입니다.)

border-box

위치는 테두리 박스 기준입니다.

content-box

위치는 콘텐츠 박스 기준입니다.

이 background-attachment 값이 레이어에 대해 fixed이면, 이 속성은 효과가 없습니다: 이 경우 배경 위치 지정 영역은 초기 포함 블록이 됩니다.

참고: background-clip이 padding-box, background-origin이 border-box, background-position이 top left (초기값)이고, 요소에 0이 아닌 테두리가 있으면, 배경 이미지의 상단 및 좌측이 클리핑됩니다.

§ 2.1 여러 배경 이미지 레이어링을 참고하여 background-origin이 다른 쉼표로 구분된 배경 속성과 어떻게 상호작용하여 각 배경 이미지 레이어를 구성하는지 확인하세요.

2.9. 이미지 크기 지정: background-size 속성

이 속성은 각 배경 이미지의 크기를 지정합니다. 속성 값은 쉼표로 구분된 <bg-size> 값의 리스트로 주어집니다.

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

값의 의미는 다음과 같습니다:

contain

이미지의 자연 비율(있는 경우)을 유지하면서, 이미지의 너비와 높이가 모두 배경 위치 지정 영역 내에 완전히 들어갈 수 있도록 가장 크게 확대/축소합니다.

cover

이미지의 자연 비율(있는 경우)을 유지하면서, 이미지의 너비와 높이가 모두 배경 위치 지정 영역을 완전히 덮을 수 있게 최소한으로 확대/축소합니다.

[ <length-percentage [0,∞]> | auto ]{1,2}

첫 번째 값은 해당 이미지의 너비, 두 번째 값은 높이를 지정합니다. 값이 하나만 주어지면 두 번째 값은 auto로 간주합니다.

<percentage>는 배경 위치 지정 영역에 대해 상대적입니다.

한 쪽 차원에 auto 값이 있으면, 이미지의 자연 비율과 다른 차원의 크기를 사용해 결정하거나, 없으면 이미지의 자연 크기를, 그것도 없으면 100%로 처리합니다.

두 값 모두 auto면 이미지의 자연 너비와 높이를 사용합니다(존재하는 경우). 누락된 차원(있는 경우)은 위 설명대로 auto로 처리합니다. 이미지에 자연 크기가 없으면, contain과 동일하게 크기가 결정됩니다.

음수 값은 유효하지 않습니다.

div {
  background-image: url(plasma.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box }

p {
  background-image: url(tubes.png);
  background-size: 50% auto;
  background-origin: border-box }

p {
  background-size: 15px 15px;
  background-image: url(tile.png)}

body {
background-size: auto;            /* 기본값 */
background-image: url(flower.png) }

p {
  background-image: url(chain.png);
  background-repeat: no-repeat round;
  background-size: 20% 30% }

background-repeat가 한(혹은 양) 축에 round일 경우, 두 번째 단계가 있습니다. UA는 해당(혹은 양방향) 축에서 이미지를 배경 위치 지정 영역에 정수 배수로 맞게 크기를 조정해야 합니다. 너비에 대해(높이는 유사하게 적용):

X ≠ 0이 1단계 후의 이미지 너비이고 W가 배경 위치 지정 영역의 너비일 때, 반올림된 너비 X' = W / round(W / X) 여기서 round()는 가장 가까운 자연수(0보다 큰 정수)를 반환합니다.

background-repeat가 한 축만 round이고, background-size의 다른 축 값이 auto라면, 세 번째 단계가 있습니다: 그 다른 축은 원래 비율이 복원되도록 크기 조정됩니다.

div {
  background-image: url(image1.png);
  background-repeat: repeat;         /* 기본값 */
  background-size: auto }            /* 기본값 */

div {
  background-image: url(image2.png);
  background-repeat: repeat;         /* 기본값 */
  background-size: 3em }             /* = '3em auto' */

div {
  background-image: url(image3.png);
  background-repeat: round repeat;
  background-size: 3em auto }

div {
  background-image: url(image4.png);
  background-repeat: repeat round;
  background-size: 3em auto }

div {
  background-image: url(image5.png);
  background-repeat: round;
  background-size: auto 4em }

배경 이미지의 너비나 높이가 0으로 결정되면, 이미지는 표시되지 않습니다. (투명 이미지였던 것과 동일한 효과입니다.)

§ 2.1 여러 배경 이미지 레이어링을 참고하여 background-size가 다른 쉼표로 구분된 배경 속성과 어떻게 상호작용하여 각 배경 이미지 레이어를 구성하는지 확인하세요.

2.10. 배경 축약형: background 속성

background 속성은 스타일시트 내에서 대부분의 배경 속성을 한 번에 설정할 수 있는 축약형 속성입니다. 쉼표로 구분된 항목의 개수가 배경 이미지 레이어의 개수를 정의합니다. 유효한 선언이 주어지면, 각 레이어마다 축약형은 background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment의 해당 값을 해당 속성의 초기값으로 먼저 설정하고, 이후 선언에서 명시적으로 지정된 값을 각 레이어에 할당합니다. 마지막으로 background-color는 지정된 색상으로 설정되고, 없으면 초기값으로 설정됩니다.

이 속성의 값은 쉼표로 구분된 값 리스트로 주어지며,

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box>
<final-bg-layer> =  <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box> || <'background-color'>

참고: <final-bg-layer>에는 색상 지정이 가능하지만, <bg-layer>에는 불가합니다.

하나의 <visual-box> 값이 있으면 background-origin과 background-clip 모두 해당 값으로 설정됩니다. 두 값이 있으면, 첫 번째 값은 background-origin에, 두 번째 값은 background-clip에 설정됩니다.

body { background: red }
p { background: url("chess.png") 40% / 10em gray
                round fixed border-box; }

body {
    background-color: red;
    background-position: 0% 0%;
    background-size: auto;
    background-repeat: repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none }

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em auto;
    background-repeat: round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}

div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto }

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat,           repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;

2.11. 특수 요소의 배경

문서 캔버스는 문서가 렌더링되는 무한 표면입니다. [CSS2] 캔버스에 해당하는 요소가 없으므로, CSS는 아래에서 설명하는 대로 캔버스 스타일링을 위해 루트 요소(HTML의 경우 <body> 요소)의 배경을 전파합니다. 그러나 캔버스에 적용될 배경 요소가 display: none이면, 캔버스 배경은 투명해집니다.

캔버스 배경이 불투명하지 않으면, 그 아래의 캔버스 표면이 비쳐 보입니다. 캔버스 표면의 질감은 UA마다 다르며 (일반적으로 불투명한 흰색임).

2.11.1. 캔버스 배경 및 루트 요소

루트 요소의 배경이 캔버스 배경이 되며, 그 배경 그리기 영역은 전체 캔버스 전체를 덮게 확장됩니다. 하지만 이미지는 루트 요소 박스를 기준으로 크기 조정 및 위치 지정됩니다. (즉, 배경 위치 지정 영역은 루트 요소에 대해 결정됩니다.) 루트 요소는 이 배경을 다시 그리지 않으며, 즉 배경의 used value는 transparent입니다.

2.11.2. 캔버스 배경 및 HTML <body> 요소

루트 요소가 HTML HTML 요소 또는 XHTML html 요소인 문서 [HTML]의 경우: background-image의 computed value가 none이고, background-color가 transparent라면, UA는 해당 요소의 첫 번째 HTML BODY 또는 XHTML body 자식 요소의 배경 속성 computed value를 전파해야 합니다. 해당 BODY 요소의 배경 속성 used value는 초기값이며, 전파된 값은 루트 요소에 지정된 것처럼 처리합니다. HTML 문서 작성자에게는 캔버스 배경을 BODY 요소에 지정하는 것이 HTML 요소에 지정하는 것보다 권장됩니다.

참고: containment를 사용하면 HTML body 요소의 이 특수 처리가 비활성화됩니다. 자세한 내용은 CSS Containment 1 § 2 강한 컨테인먼트: contain 속성을 참고하세요.

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
  >
<html>
  <head>
    <title>Setting the canvas background</title>
    <style type="text/css">
       body { background: url("http://example.org/marble.png") }
    </style>
  </head>
  <body>
    <p>My background is marble.</p>
  </body>
</html>

2.11.3. ::first-line 의사 요소의 배경

::first-line 의사 요소는 배경에 대해서는 인라인 레벨 요소처럼 동작합니다 ([CSS2] 5.12.1절 참조). 예를 들어, 첫 줄이 왼쪽 정렬된 경우 배경이 반드시 오른쪽 끝까지 확장되는 것은 아닙니다.

3. 테두리

테두리는 미리 정의된 스타일(실선, 이중선, 점선, 의사 3D 테두리 등) 또는 이미지가 될 수 있습니다. 첫 번째 경우에는 여러 속성으로 테두리의 스타일(border-style), 색상(border-color), 두께(border-width) 등을 정의합니다.

3.1. 선 색상: border-color 속성들

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

border-color 속성은 한 번의 선언으로 border-top-color, border-right-color, border-bottom-color, border-left-color를 설정하는 축약형 속성입니다.

값이 하나만 있으면 모든 면에 적용됩니다. 값이 두 개면 위와 아래는 첫 번째 값, 오른쪽과 왼쪽은 두 번째 값으로 설정됩니다. 값이 세 개면 위는 첫 번째 값, 왼쪽과 오른쪽은 두 번째 값, 아래는 세 번째 값이 적용됩니다. 값이 네 개면 각각 위, 오른쪽, 아래, 왼쪽에 적용됩니다.

3.2. 선 패턴: border-style 속성들

이 속성들은 테두리가 보일지 여부와, 보인다면 스타일이 어떻게 그려질지(테두리 이미지로 덮어쓰이지 않을 경우) 제어합니다.

border-style 속성은 한 번의 선언으로 border-top-style, border-right-style, border-bottom-style, border-left-style를 설정하는 축약형 속성입니다.

값이 하나면 모든 면에 적용됩니다. 값이 두 개면 위와 아래는 첫 번째 값, 오른쪽과 왼쪽은 두 번째 값으로 설정됩니다. 값이 세 개면 위는 첫 번째 값, 왼쪽과 오른쪽은 두 번째 값, 아래는 세 번째 값이 적용됩니다. 값이 네 개면 각각 위, 오른쪽, 아래, 왼쪽에 적용됩니다.

스타일은 <line-style> 키워드로 지정되며,

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

값의 의미는 다음과 같습니다:

none

테두리가 없습니다. 색상과 너비는 무시됩니다(즉, 테두리 너비는 0). 이로 인해 border-image-width의 초기값도 0으로 결정됩니다.

hidden

none과 동일하지만, 테이블의 테두리 충돌 해소 규칙에서 동작이 다릅니다(border-collapsed 테이블).

dotted

둥근 점들의 연속.

dashed

네모난 끝의 대시들의 연속.

solid

하나의 선분.

double

평행한 두 개의 실선, 그 사이에 공간이 있음. (선 두께는 지정되지 않지만, 선 두께와 공간의 합은 border-width와 같아야 함.)

groove

캔버스에 파인 것처럼 보임. (일반적으로 border-color보다 약간 밝고 어두운 두 색상으로 "그림자"를 만들어서 구현함.)

ridge

캔버스에서 튀어나온 것처럼 보임.

inset

테두리 안쪽의 콘텐츠가 캔버스에 파묻힌 것처럼 보임. ridge와 collapsing border 모델에서 동일하게 처리됨.

outset

테두리 안쪽의 콘텐츠가 캔버스에서 튀어나온 것처럼 보임. groove와 collapsing border 모델에서 동일하게 처리됨.

테두리는 요소의 배경보다 앞에 그려지지만, 콘텐츠(겹칠 경우)보다 뒤에 그려집니다.

참고: 테두리 색상이 검정 또는 흰색에 가까운 경우 groove, ridge, inset, outset의 "3D" 효과를 만들기 위해 중간 색상과는 다른 색상 계산이 필요할 수 있습니다.

참고: 점과 대시의 간격 및 대시의 길이는 제어할 수 없습니다. 구현체는 코너의 대칭을 고려한 간격을 선택하는 것이 권장됩니다.

참고: 이 명세는 서로 다른 스타일의 테두리가 코너에서 어떻게 결합되어야 하는지 정의하지 않습니다. 또한 둥근 모서리의 경우 패딩이 모서리 반경보다 작으면 코너와 콘텐츠가 겹칠 수 있습니다.

3.3. 선 두께: border-width 속성들

이 속성들은 테두리의 두께, 즉 테두리 너비를 지정합니다. 여기서

<line-width> = <length [0,∞]> | thin | medium | thick

음수 값은 유효하지 않습니다. thin, medium, thick 키워드는 각각 1px, 3px, 5px에 해당합니다.

border-width 속성은 한 번의 선언으로 border-top-width, border-right-width, border-bottom-width, border-left-width를 설정하는 축약형 속성입니다.

값이 하나면 모든 면에 적용됩니다. 값이 두 개면 위와 아래는 첫 번째 값, 오른쪽과 왼쪽은 두 번째 값으로 설정됩니다. 값이 세 개면 위는 첫 번째 값, 왼쪽과 오른쪽은 두 번째 값, 아래는 세 번째 값이 적용됩니다. 값이 네 개면 각각 위, 오른쪽, 아래, 왼쪽에 적용됩니다.

참고: 초기 너비는 medium이지만, 초기 스타일은 none이므로; used 초기 너비는 0입니다.

3.4. 테두리 축약형 속성

이 축약형 속성들은 박스의 위, 오른쪽, 아래, 왼쪽 border-width, border-color, border-style을 설정합니다. 생략된 값은 초기값으로 설정됩니다.

border 속성은 박스의 네 면에 대해 동일한 border-width, border-color, border-style을 설정하는 축약형 속성입니다. margin 및 padding 축약형 속성과 달리, border 속성은 네 면에 서로 다른 값을 설정할 수 없습니다. 그럴 경우, 다른 테두리 속성들을 사용해야 합니다.

border 축약형은 border-image도 초기값으로 재설정합니다. 따라서 작성자는 이전에 적용된 테두리 설정을 덮어쓸 때 다른 축약형이나 개별 속성보다 border 축약형을 사용하는 것이 권장됩니다. 이렇게 하면 border-image도 재설정되어 새로운 스타일이 제대로 적용될 수 있습니다.

참고: CSS 작업 그룹은 border 축약형이 향후 CSS 레벨에서도 모든 테두리 속성을 리셋하도록 할 계획입니다. 예를 들어, 미래에 glyphs를 테두리로 사용할 수 있는 border-characters 속성이 도입된다면, 그것도 border 축약형으로 리셋됩니다. border 축약형으로 테두리를 리셋하면, 미래에 어떤 속성이 추가되더라도 "빈 캔버스"를 보장할 수 있습니다.

p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}

속성들이 어느 정도 기능이 겹치므로, 규칙이 작성되는 순서가 중요할 수 있습니다.

blockquote {
  border-color: red;
  border-left: double;
  color: black
}

4. 둥근 모서리

4.1. 곡률 반경: border-radius 속성들

border-*-radius 속성의 두 <length-percentage> 값은 외부 border edge의 모서리 형태를 정의하는 1/4 타원의 반경을 의미합니다(아래 다이어그램 참고). 첫 번째 값은 수평 반경, 두 번째 값은 수직 반경입니다. 두 번째 값이 생략되면 첫 번째 값을 복사합니다. 길이 중 하나가 0이면, 모서리는 둥글지 않고 네모납니다. 수평 반경의 백분율은 border box의 너비를, 수직 반경의 백분율은 border box의 높이를 기준으로 합니다. 음수 값은 유효하지 않습니다.

DIV.standout {
    width: 13em;
    height: 8em;
    border: solid black 1em;
    border-radius: 7.5em 5em }

border-radius 축약형은 네 border-*-radius 속성을 모두 설정합니다. 슬래시(/) 앞뒤에 값이 있으면, 슬래시 앞의 값들은 수평 반경을, 슬래시 뒤의 값들은 수직 반경을 설정합니다. 슬래시가 없으면, 모든 값이 두 축에 동일하게 적용됩니다. 각 반경의 네 값은 위쪽-왼쪽, 위쪽-오른쪽, 아래쪽-오른쪽, 아래쪽-왼쪽 순서입니다. 아래쪽-왼쪽이 생략되면 위쪽-오른쪽과 동일합니다. 아래쪽-오른쪽이 생략되면 위쪽-왼쪽과 동일합니다. 위쪽-오른쪽이 생략되면 위쪽-왼쪽과 동일합니다.

border-radius: 4em;

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

border-radius: 2em 1em 4em / 0.5em 3em;

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

4.2. 모서리 형태 지정

padding edge(내부 테두리) 반경은 외부 테두리 반경에서 해당 테두리 두께를 뺀 값입니다. 결과가 음수이면, 내부 반경은 0입니다. (이 경우 테두리 내부 곡선의 중심이 외부 곡선의 중심과 일치하지 않을 수 있습니다.) content edge 반경도 padding edge 반경에서 해당 padding을 뺀 값이며, 음수면 0입니다. 곡선 구간 내의 테두리와 패딩 두께는 인접한 면에서 보간되고, 인접한 두 테두리 두께가 다를 경우 코너는 두꺼운 테두리와 얇은 테두리 사이가 부드럽게 이어집니다.

모든 테두리 스타일(solid, dotted, inset 등) 모두 테두리 곡선을 따릅니다.

참고: 코너 외부 곡선의 중심이 반대쪽 padding edge를 넘으면(코너의 반대쪽 면의 border area에서), 내부 곡선은 완전한 1/4 타원이 아닙니다.

p { width: 70px; height: 70px; border: solid 30px; border-color: orange orange silver silver; border-top-right-radius: 100%; }

margin edge는 border edge의 바깥쪽에 있으므로, 각 테두리 반경에 해당 margin 두께를 더해서 반경을 계산합니다. 하지만, 테두리 반경이 margin보다 작아 뾰족한 코너를 만들어야 할 경우(둥근 코너와 뾰족한 코너의 연속성을 보장하기 위해), margin이 테두리 반경보다 작은 경우 margin은 반경/마진 비율 r에 대해 1 + (r-1)³만큼 곱해 코너 반경을 계산합니다.

4.3. 모서리 클리핑

테두리 이미지는 border-radius의 영향을 받지 않지만, 테두리, 패딩, 콘텐츠 에지에 대한 페인팅 또는 이벤트 처리 클리핑 효과는 각자 곡선에 맞게 잘려야 합니다. 예를 들어, 배경은 background-clip으로 지정된 곡선에 잘리고, overflow가 visible이 아닐 때는 곡선 padding edge에, 치환 요소 콘텐츠는 곡선 content edge에, 포인터 이벤트는 곡선 border edge에 등등 잘립니다.

참고: border-radius가 요소의 상호작용 영역을 줄이므로, 저자는 남은 상호작용 영역이 대상 플랫폼의 권장 최소값을 충족하는지 확인해야 합니다. 특히, border-radius를 사용할 때 권장 터치 타깃 최소 크기에 맞추려면 더 넓은 너비와 높이가 필요할 수 있습니다.

DIV {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em }

4.4. 색상과 스타일 전환

색상과 스타일 전환은 두 border-radius와 내부 곡선의 중심(만약 border-radius가 border width보다 작다면 패딩 에지의 모서리일 수 있음)을 모두 포함하는 가장 작은 사각형과 교차하는 테두리 구간 내에 포함되어야 합니다.

이 중 하나의 테두리가 너비가 0이면, 다른 테두리가 전체 전환 영역을 차지합니다. 그렇지 않으면, 인접한 테두리 간의 색상과 스타일 전환의 중심은 테두리 두께의 비율에 대한 연속 단조 함수로 곡선 위의 한 점입니다. 하지만 실제로 이 전환이 어떻게 보이고, 이 비율에서 곡선의 점으로 어떻게 매핑되는지는 정의되지 않습니다.

4.5. 곡선 겹침

모서리 곡선은 겹치면 안 됩니다: 인접한 두 border-radius의 합이 border box의 크기를 초과할 때, UA는 모든 border-radius의 사용값을 비례적으로 줄여 어느 것도 겹치지 않게 해야 합니다. 반경 축소 알고리즘은 다음과 같습니다:

f = min(L_i/S_i), 여기서 i ∈ {top, right, bottom, left}, S_i는 해당 면의 두 코너 반경의 합, L_top = L_bottom = 박스의 너비, L_left = L_right = 박스의 높이. f < 1이면 모든 코너 반경을 f만큼 곱해 줄입니다.

참고: 이 공식은 1/4 원이 그대로 유지되고, 큰 반경이 작은 반경보다 항상 크도록 보장하지만, 이미 충분히 작은 코너까지 더 줄일 수 있으므로, 인접 요소의 테두리가 동일하게 보여야 하는데 다르게 보일 수 있습니다.

곡선이 스크롤바와 같은 UI 요소와 겹치면, UA는 영향을 받는 border-radius(해당 반경만)를 필요만큼 더 줄일 수 있습니다.

예를 들어, 아래 도형의 테두리 A는 다음과 같을 수 있습니다:

box-sizing: border-box;
width: 6em;
height: 2.5em;
border-radius: 0.5em 2em 0.5em 2em

높이(2.5em)는 지정된 반경(0.5em + 2.0em)에 충분합니다. 하지만 높이가 2em인 경우,

box-sizing: border-box;
width: 6em;
height: 2em;
border-radius: 0.5em 2em 0.5em 2em

모든 코너를 0.8배로 줄여야 합니다. 사용된 테두리 반경은 0.4em(0.5em 대신), 1.6em(2em 대신)입니다. 아래 도형의 B를 참고하세요.

4.6. 테이블에 미치는 효과

border-radius 속성은 table, inline-table, table-cell 박스에 분리된 테두리 모드(border-collapse: separate)에서 적용됩니다. border-collapse가 collapse일 때는 효과가 없습니다.

5. 테두리 이미지

작성자는 테두리 스타일 대신 사용할 이미지를 지정할 수 있습니다. 이 경우, 테두리의 디자인은 border-image-source로 지정된 이미지의 면과 코너에서 가져오며, 해당 이미지의 조각들은 border image area 크기에 맞게 다양한 방식으로 분할, 크기 조정, 늘리기가 가능합니다. border-image 속성은 레이아웃에는 영향을 미치지 않습니다: 박스, 그 내용, 주변 내용의 레이아웃은 border-width와 border-style 속성만으로 결정됩니다.

DIV {
  border: double orange 1em;
  border-image: url("border.png") 27 round stretch;
 }

좀 더 복잡한 예시입니다. 이 예시는 border 이미지가 폴백 border-style과 어떻게 대응되는지, border 영역을 넘어서 확장될 수 있음을 보여줍니다. 테두리 이미지는 확장된 코너 효과가 있는 물결 모양의 초록 테두리입니다:

나머지 테두리 속성은 타일 배치에 다음과 같이 상호작용합니다:

여기서 border-width는 12px이지만, border-image-width 속성은 124px로 계산됩니다. border image area는 border box에서 31px만큼 아웃셋되어 margin area까지 확장됩니다. border-image가 로드되지 않거나 UA가 지원하지 않으면, 폴백 렌더링은 초록색 이중 테두리를 사용합니다.

.notebox {
  border: double orange;
  /* 반드시 'border' 축약형을 먼저 설정해야, 그렇지 않으면 'border-image'가 지워짐 */
  border-image: url("border.png") 30 round;
  /* 다른 'border' 속성은 이후에 설정 가능 */
  border-width: thin thick;
}
...
.sidebar .notebox {
  box-shadow: 0 0 5px gray;
  border-radius: 5px;
  border: none; /* 모든 테두리 끄기 */
  /* 'border' 축약형은 'border-image'도 리셋함 */
}

5.1. 이미지 소스: border-image-source 속성

이 속성은 border-style 속성으로 지정된 렌더링 대신 테두리로 사용할 이미지를 지정합니다. fill 키워드가 border-image-slice에 주어지면, 요소의 추가 이미지 배경으로도 사용됩니다. 값이 none이거나 이미지를 표시할 수 없거나(또는 속성이 적용되지 않으면) 테두리 스타일이 사용됩니다; 그렇지 않으면 요소의 border-style 테두리는 그려지지 않고, 이 border image가 아래에서 설명하는 방식으로 그려집니다.

5.2. 이미지 분할: border-image-slice 속성

이 속성은 이미지의 상, 우, 하, 좌 가장자리에서 안쪽으로 오프셋을 지정해, 이미지를 9개 영역(4개 코너, 4개 면, 가운데)으로 나눕니다. 가운데 이미지는 fill 키워드가 없으면 버려집니다(완전히 투명 처리). (배경 위에 그려집니다; Drawing the Border Image 참고.)

값이 하나면 모든 면에 적용됩니다. 값이 두 개면 위/아래는 첫 번째 값, 오른쪽/왼쪽은 두 번째 값으로 설정됩니다. 값이 세 개면 위는 첫 번째 값, 왼쪽/오른쪽은 두 번째 값, 아래는 세 번째 값이 적용됩니다. 값이 네 개면 각각 위, 오른쪽, 아래, 왼쪽에 적용됩니다.

<percentage [0,∞]>

백분율은 이미지 크기 기준입니다: 수평 오프셋은 이미지 너비, 수직 오프셋은 이미지 높이 기준입니다.

<number [0,∞]>

숫자는 래스터 이미지는 픽셀 단위, 벡터 이미지는 벡터 좌표 단위입니다.

fill

fill 키워드가 있으면, border-image 가운데 부분이 보존됩니다. (기본값은 버림, 즉 빈 영역 처리.)

음수 값은 유효하지 않습니다. 이미지 크기보다 큰 계산값은 100%로 처리됩니다.

border-image-slice 값으로 지정된 영역은 겹칠 수 있습니다. 하지만 좌/우 너비의 합이 이미지 너비 이상이면, 상/하 면과 가운데 영역 이미지는 비어 있게 됩니다—​이 경우 해당 부분에 투명 이미지가 지정된 것과 동일한 효과입니다. 상/하 값도 마찬가지입니다.

이미지 크기를 알아야 분할할 수 있을 경우 (예: 자연 치수가 없는 SVG), 기본 크기 지정 알고리즘으로, 지정 크기 없이, border image area를 기본 객체 크기로 사용합니다.

5.3. 그리기 영역: border-image-width 속성

border image는 border image area라 불리는 영역 내에 그려집니다. 이 영역의 경계는 기본적으로 border box와 일치합니다. border-image-outset 참고.

border-image-width의 네 값은 border image area를 아홉 개 영역(region)으로 나누는 데 사용되는 오프셋을 지정합니다. 각 오프셋은 해당 영역의 상, 우, 하, 좌에서 안쪽으로의 거리입니다.

값이 하나면 모든 면에 적용됩니다. 값이 두 개면 위/아래는 첫 번째 값, 오른쪽/왼쪽은 두 번째 값으로 설정됩니다. 값이 세 개면 위는 첫 번째 값, 왼쪽/오른쪽은 두 번째 값, 아래는 세 번째 값이 적용됩니다. 값이 네 개면 각각 위, 오른쪽, 아래, 왼쪽에 적용됩니다.

값의 의미는 다음과 같습니다:

<length-percentage [0,∞]>

백분율은 border image area 크기 기준입니다: 수평 오프셋은 영역 너비, 수직 오프셋은 영역 높이 기준입니다.

<number [0,∞]>

숫자는 해당 면의 계산된 border-width의 배수를 의미합니다.

auto

auto가 지정되면, 사용되는 border-image-width는 해당 이미지 조각의 자연 너비 또는 높이(해당되는 쪽)입니다(border-image-slice 참고). 이미지에 필요한 자연 치수가 없으면, 해당 계산된 border-width가 대신 사용됩니다.

모든 border-image-width 값에 대해 음수 값은 유효하지 않습니다.

대칭되는 두 border-image-width 오프셋이 겹칠 정도로 크면, 모든 border-image-width 오프셋의 사용값을 비례적으로 줄여 겹치지 않게 합니다. 수식으로는: L_width는 border image area의 너비, L_height는 높이, W_side는 border-image-width의 해당 면 값일 때, f = min(L_width/(W_left+W_right), L_height/(W_top+W_bottom)). f < 1이면 모든 W를 f만큼 곱해 줄입니다.

5.4. 에지 오버행: border-image-outset 속성

이 값은 border image area가 border box를 얼마나 넘어서 확장되는지 지정합니다.

값이 하나면 모든 면에 적용됩니다. 값이 두 개면 위/아래는 첫 번째 값, 오른쪽/왼쪽은 두 번째 값으로 설정됩니다. 값이 세 개면 위는 첫 번째 값, 왼쪽/오른쪽은 두 번째 값, 아래는 세 번째 값이 적용됩니다. 값이 네 개면 각각 위, 오른쪽, 아래, 왼쪽에 적용됩니다.

<length [0,∞]>

지정된 길이만큼 오버행(outset)됩니다.

<number [0,∞]>

해당 면의 계산된 border-width 배수만큼 오버행됩니다.

음수 값은 유효하지 않습니다.

border box 바깥에 그려진 border-image 부분은 스크롤을 유발하지 않습니다. 또한 그러한 부분은 마우스 이벤트에 대해 보이지 않으며, 해당 요소에 이벤트를 대신 캡처하지도 않습니다.

참고: 스크롤 메커니즘을 유발하지 않더라도, outset된 이미지는 상위 요소나 뷰포트에 의해 잘릴 수 있습니다.

5.5. 이미지 타일링: border-image-repeat 속성

이 속성은 border image의 측면 및 가운데 부분 이미지를 어떻게 크기 조정과 타일링할지 지정합니다. 첫 번째 키워드는 위/가운데/아래 부분의 수평 크기 조정과 타일링에, 두 번째 키워드는 좌/가운데/우 부분의 수직 크기 조정과 타일링에 적용됩니다; Drawing the Border Image 참고. 두 번째 키워드가 없으면 첫 번째와 동일하게 간주합니다. 값의 의미는 다음과 같습니다:

stretch

이미지는 해당 영역(region)을 채우도록 늘어납니다.

repeat

이미지는 해당 영역(region)을 채우도록 타일링(반복)됩니다.

round

이미지는 해당 영역(region)을 채우도록 타일링(반복)됩니다. 영역을 정수 개 타일로 채우지 못하면, 이미지를 크기 조정하여 정수 개 타일이 딱 맞게 합니다.

space

이미지는 해당 영역(region)을 채우도록 타일링(반복)됩니다. 영역을 정수 개 타일로 채우지 못하면, 남는 공간을 타일 주변에 분배합니다.

테두리 이미지 부분의 크기 조정과 타일링 과정은 아래 섹션에서 정확히 설명됩니다.

5.6. 테두리 이미지 그리기

border image가 border-image-source로 지정된 후, border-image-slice 값으로 분할되고, 결과 9개의 이미지는 4단계로 해당 border image region에 맞게 크기 조정, 위치 지정, 타일링됩니다:

1. border-image-width로 크기 조정.
   • 위/아래 테두리 이미지는 각각 위/아래 border image region 높이에 맞추고, 너비는 비례적으로 조정합니다.
   • 왼쪽/오른쪽 테두리 이미지는 각각 왼쪽/오른쪽 border image region 너비에 맞추고, 높이는 비례적으로 조정합니다.
   • 코너 이미지는 해당 border image region의 너비와 높이에 맞게 조정합니다.
   • 가운데 이미지는 위 이미지와 같은 비율로 너비를 조정하고, 그 비율이 0 또는 무한대면 아래 이미지의 비율을 대신 사용하며, 그것도 안 되면 너비 조정은 하지 않습니다. 가운데 이미지의 높이는 왼쪽 이미지와 같은 비율로 조정, 그 비율이 0 또는 무한대면 오른쪽 이미지의 비율을 대신 사용, 그것도 안 되면 높이 조정은 하지 않습니다.
2. border-image-repeat로 크기 조정.
   • 첫 번째 키워드가 stretch면, 위/가운데/아래 이미지는 border image area의 가운데 영역 너비에 맞게 추가로 크기 조정됩니다. 높이는 더 이상 변경되지 않습니다.
   • 첫 번째 키워드가 round면, 위/가운데/아래 이미지는 너비가 조정되어, border image area의 가운데 영역에 정확히 정수 개가 맞게 들어갑니다. round와 background-repeat에서와 동일합니다.
   • 첫 번째 키워드가 repeat 또는 space면, 위/가운데/아래 이미지는 더 이상 변경되지 않습니다.
   • 두 번째 키워드의 stretch, round, repeat, space 효과는 유사하게 좌/가운데/우 이미지의 높이에 적용됩니다.
3. 첫 번째 타일 위치 지정.
   • 첫 번째 키워드가 repeat면, 위/가운데/아래 이미지는 해당 영역 내에서 수평 중앙에 배치됩니다. 아니면 해당 border image area의 왼쪽에 배치됩니다.
   • 두 번째 키워드가 repeat면, 좌/가운데/우 이미지는 해당 영역 내에서 수직 중앙에 배치됩니다. 아니면 해당 border image area의 위쪽에 배치됩니다.
4. 타일링 및 그리기.
   • 이미지는 각자 영역을 채우도록 타일링됩니다.
   • space의 경우, 부분 타일은 버리고 남는 공간을 타일 앞뒤 및 사이에 고르게 분배합니다. (즉, 첫 타일 앞, 마지막 타일 뒤, 타일 사이의 간격이 동일합니다.) 이로 인해 border-image 측면 영역이 비어 있을 수 있습니다.
   • 이미지는 일반 테두리와 동일한 쌓임 수준에서 그려집니다: 배경 레이어 바로 앞.
   • fill이 border-image-source에 지정되지 않은 경우 가운데 이미지는 그려지지 않습니다.

5.7. 테두리 이미지 축약형: border-image 속성

이 속성은 한 번의 선언으로 border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat를 설정하는 축약형 속성입니다. 생략된 값은 초기값으로 설정됩니다.

5.8. 테이블에 미치는 효과

border-image 속성은 border-collapse가 collapse로 설정된 테이블 및 인라인 테이블의 테두리에 적용됩니다. 하지만 이 명세는 이미지 테두리가 어떻게 렌더링되는지 정의하지 않습니다. 특히, 이미지 테두리가 테이블의 셀, 행, 행 그룹의 테두리와 가장자리에서 어떻게 상호작용하는지 정의하지 않습니다 (테두리 충돌 해소 참고).

향후 명세에서 렌더링 방식이 정의될 것으로 예상됩니다. 그 전까지는 UA가 collapse된 테이블에 border image를 적용하지 않는 것이 권장됩니다.

6. 기타 효과

참고: 박스가 분할될 때 배경과 테두리가 어떻게 적용되는지 정의하는 box-decoration-break 속성은 CSS 단편화 모듈로 이동했습니다. [CSS-BREAK-3]

6.1. 드롭 섀도: box-shadow 속성

box-shadow 속성은 박스에 하나 이상의 그림자(드롭 섀도)를 추가합니다. 값은 none이거나 쉼표로 구분된 그림자 리스트(앞에서 뒤로 순서)일 수 있습니다.

각 그림자는 <shadow>로 주어지며, 2~4개의 길이 값, 선택적 색상, 선택적 inset 키워드로 구성됩니다. 생략된 길이는 0, 생략된 색상은 currentColor가 기본값입니다.

<shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset?

각 <shadow>의 구성요소는 다음과 같이 해석됩니다:

1번째 <length>

그림자의 수평 오프셋을 지정합니다. 양수면 박스 오른쪽에 그림자가 생기고, 음수면 왼쪽에 그림자가 생깁니다.

2번째 <length>

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

3번째 <length [0,∞]>

블러 반경을 지정합니다. 음수 값은 유효하지 않습니다. blur 값이 0이면 그림자 가장자리가 날카롭고, 값이 클수록 가장자리가 더 흐려집니다. 아래의 그림자 흐림 참고.

4번째 <length>

확장 거리(spread distance)를 지정합니다. 양수면 그림자가 모든 방향으로 지정된 반경만큼 확장되고, 음수면 그림자가 축소됩니다. 아래 그림자 형태 참고.

참고: 내부 그림자의 경우, 그림자 영역을 확장하면 그림자 외곽 형태는 오히려 축소됩니다.

<color>

그림자 색상을 지정합니다. 색상 생략 시 currentColor가 기본값입니다.

inset

inset 키워드가 있으면, 그림자가 외부 box-shadow(박스가 캔버스 위에 떠 있는 것처럼 그림자), 대신 내부 box-shadow(캔버스가 박스에 그림자를 던지는 것처럼 박스를 오려낸 것처럼 보임)으로 동작합니다.

아래 예시는 spread와 blur가 그림자에 미치는 효과를 보여줍니다:

width: 100px; height: 100px;
border: 12px solid blue; background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px 0px 8px rgba(0,0,0,0.4) inset;

6.1.1. 그림자 형태, 확장, 노크아웃

외부 box-shadow는 요소의 border-box가 불투명인 것처럼 그림자를 만듭니다. 확장 거리가 0이면, 외곽선은 border box와 정확히 동일한 크기와 형태입니다. 그림자는 border edge 바깥쪽에만 그려지고, 요소의 border-box 안쪽에서는 잘립니다.

내부 box-shadow는 padding edge 바깥이 불투명한 것처럼 그림자를 만듭니다. 확장 거리가 0이면, 외곽선은 padding box와 정확히 동일한 크기와 형태입니다. 그림자는 padding edge 안쪽에만 그려지고, 요소의 padding box 바깥에서는 잘립니다.

확장 거리가 정의되어 있으면, 위에서 정의한 그림자 외곽선이 외부 box-shadow의 경우 바깥쪽으로, 내부 box-shadow의 경우 안쪽으로 확장(또는 축소)됩니다. 그림자의 직선 가장자리를 확장 거리만큼 outsetting(내부는 insetting)하며, 결과 너비/높이를 0으로 바닥 처리합니다.

아래는 파란 테두리가 있는 오렌지 박스에 그림자를 줄 때의 예시입니다.

border:5px solid blue; background-color:orange; width: 144px; height: 144px;	border-radius: 20px;	border-radius: 0;
box-shadow: rgba(0,0,0,0.4) 10px 10px;
box-shadow: rgba(0,0,0,0.4) 10px 10px inset
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ inset

spread가 적용될 때 박스 형태를 유지하기 위해, 그림자의 코너 반경 또한 border-box(padding-box) 반경에서 확장 거리만큼 (내부는 감산) 증가(감소)합니다(0으로 바닥 처리). 단, 작은 border-radius에서 더 뾰족한 코너를 만들기 위해 (둥근·뾰족 코너의 연속성을 보장), border radius가 확장 거리보다 작으면 (내부 그림자는 확장 거리의 절대값보다 작을 때), 확장 거리를 비율 r에 따라 1 + (r-1)³ 곱한 값으로 코너 반경 계산에 사용합니다. 예를 들어, border radius가 10px, 확장 거리가 20px이면(r = .5), 그림자 코너 반경은 10px + 20px × (1 + (.5 - 1)³) = 27.5px이 되어 30px보다 적게 됩니다. 이 보정은 각 치수별로 독립적으로 적용됩니다.

border-image는 box-shadow의 형태에 영향을 주지 않습니다.

6.1.2. 그림자 가장자리 흐림

0이 아닌 blur radius는 생성된 그림자가 흐려져야 함을 의미하며, 예를 들어 가우시안 필터 등이 사용될 수 있습니다. 정확한 알고리즘은 정의되지 않았으나, 생성된 그림자는 각 픽셀값이 예상값에서 5% 이내로 오차가 나야 하며, 그림자에 blur radius의 절반 표준편차로 가우시안 블러를 적용한 이미지와 유사해야 합니다.

참고: 긴 직선 그림자에서 blur radius는 그림자 가장자리를 기준으로 수직으로, 중심에서 양쪽으로 blur radius의 두 배 길이만큼 색상 변화가 명확하게 나타나며, 그림자 내부 끝점은 거의 그림자색, 외부 끝점은 거의 완전 투명입니다.

6.1.3. 레이어링, 레이아웃, 기타 세부사항

그림자 효과는 앞에서 뒤로 적용됩니다: 첫 번째 그림자가 맨 위, 나머지는 뒤에 쌓입니다. 그림자는 레이아웃에 영향을 주지 않고 다른 박스나 텍스트, 그림자와 겹칠 수 있습니다. 쌓임 컨텍스트와 페인팅 순서 기준으로, 요소의 외부 box-shadow는 해당 요소 배경 바로 아래에 그려지고, 내부 그림자는 배경 바로 위(테두리, border-image가 있으면 그 아래)에 그려집니다.

별도 명시가 없는 한, 드롭 섀도는 주 박스에만 적용됩니다. 영향받는 박스가 여러 fragment라면, box-decoration-break에 지정된 대로 그림자가 적용됩니다.

그림자는 스크롤을 유발하지 않으며 스크롤 가능한 오버플로우 영역의 크기를 늘리지 않습니다.

외부 그림자는 collapsing border 모델의 내부 테이블 요소에 영향을 주지 않습니다. collapsing border 모델에서 테두리 두께가 다를 때(예: 테이블의 한 행만 두꺼운 테두리, 행 span 셀이 인접 셀과 두께 다를 때) 단일 테두리 edge에 그림자가 정의되면, 그림자 위치와 렌더링은 정의되지 않습니다.

7. 레벨

이 절은 정보 제공용입니다. CSS는 각기 다른 기능 수준(레벨)을 가지며, 각 레벨은 그 상위 레벨의 부분집합입니다. (전체 설명은 [CSS-2017] 참고.) 아래 리스트는 이 명세의 각 레벨별 포함 기능을 설명합니다.

7.1. 레벨 1

• background-color
• background-image 하나의 이미지만(레이어 없음)
• background-repeat: repeat | repeat-x | repeat-y | no-repeat만 허용
• background-attachment: scroll | fixed만 허용
• background-position: 한 개 또는 두 개 값만 허용
• background 축약형: color, image, repeat, attachment, position만 허용
• border-color 속성들
• border-style 속성들
• border-width 속성들
• border-top, border-bottom, border-right, border-left, border 축약형 속성

7.2. 레벨 2

• background-color
• background-image: 하나의 이미지만(레이어 없음)
• background-repeat: repeat | repeat-x | repeat-y | no-repeat만 허용
• background-attachment: scroll | fixed만 허용
• background-position: 한 개 또는 두 개 값만 허용
• background: color, image, repeat, attachment, position만 허용
• border-color 속성들
• border-style 속성들
• border-width 속성들
• border-top, border-bottom, border-right, border-left, border 축약형 속성

7.3. 레벨 3

• CSS Backgrounds and Borders Module Level 3에 기술된 모든 기능

8. 변경사항

8.1. 2023년 2월 14일 후보 권고안 스냅샷 이후 변경사항

• background-position의 직렬화 정의를 § 2.6.1 background-position 값 직렬화에 추가함. (이슈 2274)
• 변경사항: <color>를 <final-bg-layer>의 앞에 이동을 background 축약형에서 되돌림. (이슈 8496)
• 테두리 너비의 소수점 반올림을 디바이스 픽셀로 지정함. (이슈 7434)
• border-radius와 축별 overflow longhand의 상호작용을 명시함. (이슈 5210)
• background-image의 Computed Value 줄 오류 수정. (이슈 8604)
• <box> 정의 삭제 (이제 Box 모듈이 해당 용어를 정의하므로 <visual-box> 참조로 대체).
• 속성 정의 테이블에서 "Animation Type"과 "Logical Property Group"을 최신 기대치에 맞게 포함함.
• 최신 값 정의 문법을 사용해 속성 문법 정의를 간결화함.
• box-shadow가 적용되는 위치 정의를 개선함. (이슈 9286)

8.2. 2020년 12월 22일 후보 권고안 스냅샷 이후 변경사항

• 루트가 박스를 생성하지 않을 때 배경 전파 규칙이 display: none에만 적용됨을 명확히 함, display: contents에는 적용되지 않음. (이슈 3779)
• border-width thin, medium, thick의 크기를 명확하게 정의함. (이슈 7254)
• 사소한 편집 개선.

8.3. 2017년 10월 17일 후보 권고안 이후 변경사항

• <shadow> 문법의 순서를 브라우저 직렬화 및 text-shadow/drop-shadow()에 맞게 반전함. (이슈 2305)

  <shadow> = inset<color>? && <length>{2,4} && <color>inset?

• spread 반경 조정은 곡률 반경이 커질 때(축소가 아닌 경우)에만 그림자와 마진에 적용됨. (이슈 1900)

  spread를 적용할 때 박스 형태를 유지하기 위해 그림자 코너 반경도 border-box 반경에서 확장 거리만큼 증가(내부 그림자는 감소)합니다(0으로 바닥 처리). 단, 작은 border-radius에서 더 뾰족한 코너를 만들기 위해 (둥근·뾰족 코너의 연속성 보장) , border radius가 확장 거리보다 작으면 (내부 그림자는 확장 거리 절대값보다 작을 때) , 확장 거리를 1 + (r-1)³만큼 곱해 코너 반경에 사용합니다.

• <color>가 <shadow>에서 생략되면 currentColor가 기본값임을 명확히 함. (2766)

  색상이 없으면, currentColor가 기본값 사용 색상은 color 속성에서 가져옴.

• 속성 정의 테이블의 “Animation type”과 “Computed value” 줄을 정비함.
• 음수 값 제한을 반영하여 CSS 괄호 범위 표기법을 문법에 적용함, 이전 게시판의 일부 문법 오류도 수정함.
• 사소한 편집 개선.

8.4. 2014년 9월 9일 후보 권고안 이후 변경사항

이 명세에 대해 2014년 9월 9일 후보 권고안 이후 다음과 같은(비사소) 변경이 있었습니다:

• box-shadow: none 정의 추가. (명백해서 아무도 빠진 걸 몰랐던 듯.)
• <'background-color'> 구성요소를 <final-bg-layer> 직렬화에서 앞에 이동함. 일부 작성자들이 이를 기대하는 듯하나, 논리적으로는 덜 타당함.
• border-radius의 collapsed-borders 테이블 적용 효과 제거.
• <position>을 <bg-position>로 다시 명명함(다른 속성들이 세 값 문법을 생략할 예정임).

8.5. 2014년 2월 4일 최종 초안 이후 변경사항

이 명세에 대해 2014년 2월 4일 최종 초안 이후 다음과 같은(비사소) 변경이 있었습니다:

• spread 반경과 margin 반경 계산이 spread/margin이 border radius보다 클 때만 보정값을 적용하도록 수정.
• 루트 요소가 display: none일 때 canvas 배경 처리 명확화.

전체 의견 처리 결과도 있음.

8.6. 2012년 7월 24일 후보 권고안 이후 변경사항

이 명세에 대해 2012년 7월 24일 후보 권고안 이후 다음과 같은(비사소) 변경이 있었습니다:

• <'background-clip'> 및 <'background-origin'>이 background 축약형 내에서 다른 구성값 사이에 올 수 있도록 허용함(구현상 그렇게 동작함).
• <color> 및 inset이 box-shadow에서 순서 섞여도 허용함(비모호하므로, CSS는 일반적으로 비모호한 경우 자유 순서 허용).
• 코너 반경 점진 증가 공식 정의(box-shadow spread 곡률에 대해, border-radius=0(뾰족)과 border-radius>spread(둥근)의 연속성 보장, 중간 상태도 더 자연스러움).
• border-radius에 따라 margin edge가 어떻게 곡선지는지 정의 추가([CSS-SHAPES] 관련, CSS Backgrounds and Borders Level 3의 적합성은 변함 없음).
• box-decoration-break 삭제; [CSS-BREAK-3]로 이동.
• box-shadow의 spread 정의 강화.
• border-style이 none이면 border-image-width 초기값도 0임을 명확화 (border-image-width는 초기값이 계산된 border-width인데, 이 경우 0임).
• background-attachment: local이 스크롤에 따라 어떻게 동작하는지 명확화.
• background-position의 계산값을 모든 background-position 값이 보간 가능하도록 간소화.
• 각 속성 정의 테이블에 “Animation Type” 추가.

8.7. 2012년 4월 17일 후보 권고안 이후 변경사항

이 명세에 대해 2012년 4월 17일 후보 권고안 이후 다음과 같은(비편집) 변경이 있었습니다:

• background-position의 계산값 오류 수정: 계산값은 위치 리스트임.
• border-radius가 상호작용 영역을 줄이면, 박스 너비/높이를 늘려야 할 수도 있음을 알리는 참고 추가.

8.8. 2012년 2월 14일 “Last Call” 작업 초안 이후 변경사항

이 명세는 2012년 2월 14일 “Last Call” 작업 초안 이후 다음과 같은(비편집) 변경이 있었습니다:

이 변경들은 검토 기간 중 받은 의견에 대한 응답입니다. 자세한 내용은 의견 처리 결과를 참고하세요.

• 2.1절: 본 모듈의 어떤 속성이 ::first-line 및 ::first-letter 의사 요소에 적용되는지 정의함.
• 3.4절: background-repeat의 계산값 정의 오류 수정. 값은 항상 키워드 쌍이며, 단일 키워드는 아님.
• 3.10절: background-image가 background 속성에 의해 리셋되는 속성 목록에 빠져 있던 것을 추가함.
• 4.3절: border-width에 음수 길이는 유효하지 않음을 명시함.
• 5.1절: border-radius에도 음수 길이는 유효하지 않음을 추가함.
• 6.8절: border-image가 collapsed borders 테이블에 미치는 효과에 관한 절 추가, 렌더링은 추후 정의될 것임을 명시함.

8.9. 2011년 2월 15일 후보 권고안 이후 변경사항

이 명세는 2011년 2월 15일 후보 권고안 이후 다음과 같은 변경이 있었습니다:

• 3.9절: background-size가 두 개의 auto 값을 가지고 이미지에 자연 크기가 없을 때의 동작 정의.

  값이 모두 auto라면, 이미지의 자연 너비/높이를 사용(있으면) , 없는 차원(있으면)은 위에서 설명한 대로 ‘auto’로 동작 .

• 5.4절: 모서리 조인에서 색상 및 스타일 전환의 중심을 정의하지 않음(특정 범위 내), 이전 정의가 잘못되어 있었음.

  인접 테두리 간 색상 및 스타일 전환의 중심은 곡선 위의, 테두리 너비 비율에 비례하는 각도에 위치한다. 예를 들어, 위와 오른쪽 테두리 너비가 같으면 45° 각도에, 위가 오른쪽의 두 배면 30° 각도에 위치한다. 이 전환을 구분하는 선은 외부 호와 내부 호의 그 각도 점을 연결한다. 이 중 하나의 테두리가 0 너비라면, 다른 테두리가 전환 영역 전체를 차지한다. 그렇지 않으면, 인접 테두리 간 색상 및 스타일 전환의 중심은 테두리 너비 비율에 비례하여 그 위치의 함수가 이 비율에 대해 연속적이어야 한다. 하지만 실제 전환이 어떻게 보이는지, “비례”가 곡선 위의 어느 점에 대응되는지는 정의되지 않는다.

• 6.2절: 테두리 이미지 분할에서 슬라이스 위치 결정을 위해 먼저 이미지 크기를 정해야 함을 정의함. 추가:

  이미지 크기를 알아야 슬라이스할 수 있는 경우(예: 자연 크기가 없는 SVG 이미지), 자동 크기 배경과 동일하게 border image area를 기본 객체 크기로 사용해 크기 결정함.

• 7.1절 bidi에 의해 강제된 단절(bidi-imposed break)도 box-decoration-break가 영향을 미칠 수 있음을 옵션으로 추가함. 추가:

  UA는 ‘box-decoration-break’를 bidi에 의해 단절이 발생하는 경우에도 적용해 렌더링을 제어할 수 있다(예: bidi 재정렬로 인라인이 불연속 fragment로 분할될 때). 그렇지 않으면 이런 단절은 항상 ‘slice’ 처리됨.

• 7.2절: box-shadow의 기본 색상 정의.

  그림자 색상입니다. 색상이 없으면, 사용 색상은 ‘color’ 속성에서 가져옵니다.

• 3.6절: background-position의 계산값 명확화.

  값이 한두 개면 <length>는 절대 길이, 아니면 백분율. 값이 세네 개면 키워드와 길이 또는 백분율 쌍 두 개. 기원(origin)을 나타내는 두 키워드와, 그 기원으로부터 오프셋 두 개(각각 길이면 절대 길이, 아니면 백분율)로 계산됨.

  정의에서 Equivalent 를 Computes 로 변경.
• 속성 정의 테이블에 "Animation Type" 줄 추가.
• 3.6절: <bg-position> 생산식을 <position>으로 이름 변경(다른 명세에서 재사용 쉽도록), 문법을 더 장황하지만 이해하기 쉽게 재작성.

  bg-position<position> = [
    [ left | center | right | top | bottom | <length-percentage> ]
  |
    [ left | center | right | <length-percentage> ]
    [ top | center | bottom | <length-percentage> ]?
  |
    [ center | [ left | right ] <length-percentage>? ] &&
    [ center | [ top | bottom ] <length-percentage>? ]
  ]
  

• 6.5절: space 키워드를 border-image-repeat 속성 값 표에 추가함. 값 목록에는 있었으나 문법 정의에는 없었음.

  [ stretch | repeat | round | space ]{1,2}

• 5.5절: border-radius 예시의 수학 오류 수정.

  높이(2.5em)는 지정된 반경(0.5em + 2.5em 2.0em )에 충분하다.

• 4.3절: border-width의 Percentages 필드를 N/A로 표시(해당 속성에 포함되지 않음).

8.10. 2009년 12월 17일 후보 권고안 이후 변경사항

이 명세는 2009년 12월 17일 후보 권고안 이후 다음과 같은 변경이 있었습니다:

• content-box 값이 background-clip에 추가됨.
• background 축약형 문법이 background-clip 및 background-origin에 대해 변경됨.
• border-radius로 곡선을 만들 때 색상 전환에 gradient 사용 권장 삭제.
• box-shadow 속성 재도입.
• 여러 명확화 및 설명 추가.

9. 감사의 글

Tapas Roy는 Border 모듈의 편집자였으며, 이후 Background 모듈과 통합되었습니다.

Ben Stucki에게는 둥근 모서리에서 인접한 두 테두리 두께가 다르거나 한쪽이 0일 때의 처리 정의에, Arjan Eising 및 Anne van Kesteren에게는 border-radius 문법에, Zack Weinberg에게는 코너 전환 영역 다이어그램에, Lea Verou, plinss, dbaron에게는 코너 반경 보정 공식에 감사드립니다 (특히 Lea에게는 실시간 데모에 특별히 감사드립니다).

테두리 이미지 관련 속성 세트는 처음에 fantasai가 제안했습니다. 현재의 단순화(이미지 한 장을 아홉 부분으로 자름)는 Ian Hickson 덕분입니다. (하지만 원래 아이디어는 익명의 Microsoft 엔지니어들에게서 나온 듯합니다.)

마지막으로 Brad Kemper에게는 초안의 많은 기능에 대한 피드백과 제안, 모든 box-shadow 예시 그림, 그리고 급진적인 변경 제안에 특별히 감사드립니다. 이 변경 제안 덕분에 border-image 속성이 이전 정의의 여러 문제를 해결할 수 있었습니다.

10. 개인정보 보호 관련 고려사항

이 명세는 새로운 개인정보 보호 관련 고려사항을 도입하지 않습니다.

11. 보안 관련 고려사항

이 명세는 새로운 보안 관련 고려사항을 도입하지 않습니다.