CSS 그라디언트є 한 색상에서 다른 색상으로 이동합니다.

그라디언트는 도우미 함수 linear-gradient() 및radial-gradient() 뒤에 생성됩니다.

배경, 배경 이미지, 테두리 이미지 및 목록 스타일 이미지 컨트롤에서 그라데이션 배경을 설정할 수 있습니다.

CSS 그라디언트를 만드는 방법

브라우저 지원

즉: 10.0
파이어폭스: 16, 3.6 -모즈-
크롬: 26.0, 10.0 -웹킷-
원정 여행: 6.1, 5.1 -웹킷-
오페라: 12.1, 11.1 -o-
iOS 사파리: 7.1
오페라 미니: —
안드로이드 브라우저: 4.4, 4.1 -웹킷-
안드로이드용 크롬: 44

1. 선형 그래디언트()

쌀. 1. 그라디언트의 선, 그라디언트의 중간점과 끝점

선형 그라데이션일부 작업을 위해 두 가지 이상의 색상을 사용하여 직접 생성하거나 그라데이션 라인.

직접적으로 나타내지는 않아도 약혼의 가치가 승리합니다. 짐승 다운.

테두리 뒤의 그라디언트 색상은 그라디언트 선에 수직인 직선에서 균등하게 분할됩니다.

배경: linear-gradient(추가 키워드에 대한 컷/사이드 또는 컷(키워드 내기), 첫 번째 색상, 다음 다른 색상);

똑바로그라디언트는 두 가지 방법으로 지정할 수 있습니다.
도움을 위해 심하게도 단위로, 그 값은 요소 중앙에 있는 선의 선명도에 의해 결정됩니다.

Div (높이: 200px; 배경: 선형 그라데이션(45deg, #EECFBA, #C5DDE8); )

핵심 단어에 대한 도움을 위해 to top , to right , to bottom , to left , 0deg , 90deg , 180deg 및 270deg 더 비싼 그래디언트 컷을 정의하는 방법이 맞습니다.

Div(높이: 200px; 배경: 선형 그래디언트(오른쪽으로, #F6EFD2, #CEAD78); )

할당이 예를 들어 왼쪽 상단과 같이 한 쌍의 키 라인을 사용하여 직선으로 진행되는 것처럼 오른쪽 하단에서 이 방향으로 직선으로 그라데이션 포인트가 그려집니다.

Div ( 높이: 200px; 배경: 선형 그래디언트(왼쪽 상단, 파우더 블루, 핑크); )

색상의 불균일한 분포를 위해 피부색의 cob 위치는 그라디언트 곡물의 점, 순위를 통해 표시됩니다. 컬러 스톱. 치아 포인트% , de 0% - post point, 100% - end point로 설정됩니다. 예를 들면 다음과 같습니다.

Div(높이: 200px; 배경: 선형 그래디언트(맨 위로, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); )

피부 떼의 색상을 정확하게 분포시키려면 공격 색상을 앞 색상의 치아 지점에서 시작해야 합니다.

Div ( 높이: 200px; 배경: 선형 그라데이션(오른쪽으로, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); )

2. 방사형 그래디언트()

방사형 그라데이션 vіdrіznyaєtsya vіd іnіynogo tim, scho kolori go іz odnіієї 점 (gradієnt의 중심까지) і rozpodіlyayutsya naznі, 스테이크 chi elіpsa의 모양을 그림.

배경: 방사형 그라디언트(그라디언트 모양/크기/중심 위치, 첫 번째 색상, 다른 색상 얇음);

그라데이션 모양키워드 원 또는 타원으로 특징지어집니다. 모양이 설정되지 않았지만 방사형 그라데이션은 약어 뒤에 있는 타원 모양을 채웁니다.

Div(높이: 200px; 배경: 방사형 그래디언트(흰색, #FFA9A1); )

중앙에 위치 background-position 으로 선택된 추가 키워드를 요청하고 에 접두사를 추가합니다. 센터의 위치가 설정되지 않은 경우 센터에서의 프로모션 값이 부여됩니다.

Div (높이: 200px; 배경: 방사형 그래디언트(상단, #FEFFFF, #A7CECC); )

추가 베팅의 경우 % , em 또는 px 단위로 표시된 값은 타원 모양의 기울기를 사용하여 계산할 수 있습니다. 첫 번째 값은 타원의 너비를 결정하고 다른 하나는 높이를 결정합니다.

Div (높이: 200px; 배경: 방사형 그래디언트(40% 50%, #FAECD5, #CAE4D8); )

로즈마리 그라데이션핵심 단어로 도움을 요청하십시오. 가장 먼 모서리 값(가장 먼 모서리까지).

div( 높이: 200px; 배경: 방사형 그래디언트(100px 50px에서 가장 먼 원, #FBF2EB, #352A3B); )

방사형 그래디언트를 사용하여 공과 같은 버튼과 같은 사실적인 볼륨 모양을 만들 수 있습니다.

공

div ( 너비: 200px, 높이: 200px, 테두리 반경: 50%, 여백: 0 자동, 배경: 방사형 그래디언트(65%의 원 15%, 아쿠아, 다크블루); )

단추

.wrap ( 높이: 200px; 패딩: 50px 0; 배경: #cccccc; ) .button ( 너비: 100px; 높이: 100px; 테두리 반경: 50%; 여백: 0 자동; 배경: 방사형 그래디언트(가장 먼 쪽) ) 왼쪽 상단의 타원, 흰색, #aaaaaa);

우표

Vykoristovuyuchi 그라디언트 prozory 색상, 당신은 이러한 효과를 만들 수 있습니다.

jpg">