CSS3의 새로운 기능 요약: 테두리와 배경

이 시리즈는 주로 "CSS Revealed" 책에 나오는 CSS3의 몇 가지 새로운 기능에 대한 이해를 요약합니다.

1. 반투명 테두리

css3에는 rgba 대신 hsla를 사용하는 것이 가장 좋습니다. hsla: 색상 값(0~360) s: 채도(0%~100%) ); l: 밝기(0%~100%); a: 투명도(0~1)

background-clip: 배경색을 자릅니다. 기본값은 border-box입니다(배경색은 테두리까지 퍼집니다). ); padding-box(배경색이 패딩으로 확산됨); content-box(배경색이 콘텐츠로 확산됨)

샘플 코드:

width:200px;
height:200px;
background: rebeccapurple;
border: 10px solid hsla(300, 0%, 50%, 0.5);     
background-clip: padding-box; //去掉和添加上此项可以看出效果

2. 다중 테두리 구현

box-shadow: 객체 그림자 설정 또는 검색, 형식: box-shadow: 없음 | {2,4} && color?

length<1>: 수평 오프셋, 음수 값

length<2>: 수직 오프셋, 음수 값

length< 3 >: 그림자 흐림 값, 음수가 아닌 값

length<4>: 외부 길이, 음수 값

: 그림자 색상

삽입: 내부 그림자로 표시, 비어 있으면 외부 그림자

OK 설정 쉼표로 구분된 여러 효과 그룹(여러 테두리를 설정하려면 상자 그림자 및 중첩 기능을 사용하세요. 단, 테두리 스타일은 줄무늬, 점선 등이 될 수 없습니다.)

검색을 설정하려는 경우 텍스트 그림자, text-shadow 속성

윤곽선을 사용하여 두 개의 테두리 구현(이중 테두리만 가능하지만 테두리 스타일은 유연함)

3. 배경 위치 지정

배경 위치: 배경 위치 지정, 값 설명은 다음과 같습니다

가운데, 왼쪽, 위쪽, 아래쪽, 오른쪽 등. 모두 배경이 표시 시작에서 나오는 위치를 나타냅니다. 반복 타일링을 설정하면 다른 효과가 나타납니다.

값은 숫자 값 또는 백분율일 수 있습니다. 배경 위치: 오른쪽 20px 하단 30px;

background-origin: 배경 이미지의 위치 지정 매개변수, 3개 값을 갖는 컨텍스트 상자, 패딩 상자, 테두리 상자 등

폭을 계산하는 clac() 함수

샘플 코드는 다음과 같습니다.

background-image: url('../img/bck.png');
background-repeat: no-repeat;
background-size: 40px 40px;
width:200px;
height:200px;
margin-top:10px;
border: 5px solid red;
--background-position: right 0px bottom 0px;
background-origin: content-box;
background-position: calc(100% - 50px);
padding: 10px;

4. 🎜>

box-shadow: 둥근 모서리는 border-radius를 따르지만 윤곽선은 따르지 않습니다.

최소 그림자(박스-섀도) 계산식은 피타고라스 정리, 그림자 설정 시 이 값보다 커야 합니다.

샘플 코드:

margin: 10px auto;
width: 10em;
height: 8em;
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #556;