CSS3의 백그라운드, shadow, reflect, mask

CSS3에는 많은 기능이 추가되었는데 이런 기능들은 css의 효과를 크게 증가시켰다. 다음은 CSS3의background,shadow,reflect,mask를 총괄한다.
background: CSS의 background는 다음과 같은 속성을 설정할 수 있습니다.
background-color 배경색;
값은 영문(eg:pink), 16진수(eg:#ccc) 또는 rgb(02550255, 0~255)일 수 있습니다.
주: rgba(025502550255,01);마지막 매개변수는 투명도입니다.
background-position 배경 이미지의 위치;
기본값은 0%입니다.
값은left,top,right,bottom,center일 수도 있고 백분율(eg:50%)일 수도 있고 구체값(eg:20px50px)일 수도 있다.
주: 백분율 또는 구체적인 값일 때는 반드시 x y의 순서에 따라 써야 한다.
background-repeat 배경 그림이 중복되는지;
기본값은 repeate입니다.
값은 Repeat,repeat-x,repeat-y,no-repeat,inherit일 수 있다.
background-origin 이 속성은 background-position이 무엇에 비해 배경을 고정시키는지 규정한다.
기본값:padding-box;
값은border-box(테두리 상자에 비해),padding-box(내부 간격에 비해),content-box가 내용 상자에 해당할 수 있다.
background-size 배경 사이즈;
기본값: auto;
값은 백분율로 할 수 있으며 구체적인 값(width,height),contain(최소 위주),cover(최대 위주)로 할 수 있다.
background-image 배경 그림;
값은 URL (), none, inherit일 수 있습니다.
background-attachment
고정된 배경 그림 설정하기;
기본값: scroll;
값은 scroll(배경도는 페이지의 나머지 부분에 따라 스크롤),fixed(페이지에 고정), inherit,
background-clip에서 지정한 배경의 그리기 영역;
기본값:border-box;
값은border-box,padding-box,content-box가 될 수 있습니다.
background의 점차적 효과 점차적 효과에서 선형 점차적 변화, 거울 점차적 변화와 중복 점차적 변화로 나눌 수 있다.
선형 그래디언트:

background:linear-gradient(red,blue);

background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);

- 웹키트-gradient은 웹키 엔진이 점차적인 변화를 실현하는 매개 변수로 모두 5개가 있다.
첫 번째 파라미터는 점차적인 유형(type)을 나타내는데 linear(선형 점차적) 또는radial(지름방향 점차적)일 수 있다.
두 번째 매개변수와 세 번째 매개변수는 그라데이션 시작점과 끝점을 나타내는 값 쌍입니다.이 값은 좌표 형식으로 표시할 수도 있고 관건적인 값으로 표시할 수도 있다. 예를 들어lefttop(왼쪽 상단)과leftbottom(왼쪽 하단);
네 번째와 다섯 번째 매개 변수는 각각 두 개의 color-stop 함수이고 color-stop 함수는 두 개의 매개 변수를 받아들인다. 첫 번째는 점차적인 위치를 나타내고 0은 기점, 0.5는 중점, 1은 끝점이다.두 번째는 이 점의 색깔을 나타낸다.
color만 있을 때 호환성 처리 필요 없음;
다른 파라미터가 있을 때 호환성 문제를 처리하는 접두사를 붙여야 합니다: - 웹키트;
레이디얼 그래디언트:

background: -webkit-radial-gradient(50% 0,circle,deeppink,aqua,yellow);

호환되는 접두사를 처리해야 합니다: - 웹키트;
- 웹키트-gradient은 웹키 엔진이 점차적인 변화를 실현하는 매개 변수로 모두 5개가 있다.
첫 번째 파라미터는 점차적인 유형(type)을 나타내는데 linear(선형 점차적) 또는radial(지름방향 점차적)일 수 있다.
직경방향 점변에서 점변의 형상을 규정할 수 있다. circle(원),ellipse(타원).
두 번째 매개변수와 세 번째 매개변수는 그라데이션 시작점과 끝점을 나타내는 값 쌍입니다.이 값은 좌표 형식으로 표시할 수도 있고 관건적인 값으로 표시할 수도 있다. 예를 들어lefttop(왼쪽 상단)과leftbottom(왼쪽 하단);
네 번째와 다섯 번째 매개 변수는 각각 두 개의 color-stop 함수이고 color-stop 함수는 두 개의 매개 변수를 받아들인다. 첫 번째는 점차적인 위치를 나타내고 0은 기점, 0.5는 중점, 1은 끝점이다.두 번째는 이 점의 색깔을 나타낸다.
반복 그래디언트:

background:-webkit-repeating-linear-gradient(left top,red 0,red 10%,blue 10%,blue 20%);

background:-webkit-repeating-radial-gradient(left top,red 0,red 10%,blue 10%,blue 20%);

shadow: 그림자는 텍스트 그림자와 블록 그림자를 설정할 수 있습니다.
텍스트 그림자:text-shadow

p{

font-size: 40px;

text-shadow: 10px 10px 40px #0000FF;

color:#000;

-webkit-text-stroke: 1px  #FFC0CB;

}

text-shadow: x y 모호도color;
그중:-webkit-text-stroke: 테두리 너비 테두리 색;표현
블록 섀도우:box-shadow

.div1{

background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);

box-shadow: 10px 10px 50px #FF1493,10px 15px 50px #FFFF00;

text-shadow:5px 6px 20px #666;

}

box-shadow:x y 모호도 컬러;
또한 여러 개의 값이 있습니다:box-shadow:xy 모호도color,xy 모호도color,xy 모호도color;
섀도우 방향을 지정할 수도 있습니다.
box-shadow: x y 모호도 선명도 color inset;
-webkit-box-reflect: 그림자

-webkit-box-reflect:above 0px -webkit-linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,1));

아래로
above 아래로
left 왼쪽으로
오른쪽으로 right
10px 간격
- 웹키트-mask: 아련한 버전
-webkit-mask:url() no-repeat;