CSS 배경 및 테두리
CSS Backgrounds and Borders 모듈의 스타일은 배경에 색과 이미지를 채우거나, 기타 다른 방식으로 수정할 수 있습니다. 또한 테두리를 선이나 이미지로 장식할 수 있고, 직각 뿐 아니라 원형 테두리로 만들 수도 있습니다. (추가로, 요소 박스를 그림자로 꾸밀 수도 있습니다.)
참고서
속성
backgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbox-shadow
도구
- 다수의 배경 사용하기
-
하나의 요소에 여러 배경을 적용하는 법을 배웁니다.
- 배경 이미지 크기 조정하기
-
배경 이미지의 크기와 반복 여부를 설정하는 법을 배웁니다.
- CSS로 HTML 요소에 색 입히기
-
HTML 요소에 테두리를 비롯한 색상을 CSS로 적용하는 법을 배웁니다.
- Border-image 생성기
-
테두리 이미지를 실시간으로 확인하며 만들 수 있는 도구입니다.
- Border-radius 생성기
-
둥근 모서리를 실시간으로 확인하며 만들 수 있는 도구입니다.
- Box-shadow 생성기
-
요소 뒤의 그림자를 실시간으로 확인하며 만들 수 있는 도구입니다.
명세
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 |