CSS3을 사용하여 배경 그라데이션 방법 구현-CSS 튜토리얼-php.cn

CSS3을 사용하여 배경 그라데이션 방법 구현

高洛峰

풀어 주다： 2017-03-28 17:34:41

원래의

3884명이 탐색했습니다.

CSS를 사용하여 배경 그라데이션을 만들 수도 있다는 사실을 이해하기 전에는 항상 PS를 사용하여 내가 만든 웹 페이지에 배경 그라데이션 그림을 적용했습니다. 그러나 얼마 전 CSS3에서도 배경 그라데이션을 수행할 수 있다는 사실을 알게 되었고, 배경 그라데이션 효과를 만드는 것이 훨씬 쉬워졌습니다. 다음은 CSS3에서 배경 그라데이션을 수행하는 몇 가지 방법입니다.

1. 선형 그래디언트

//自上而下的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(top, blue, red);/* Firefox*/
background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/
}

로그인 후 복사

//从左往右的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, red);/* Firefox*/
background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/
}

로그인 후 복사

첫 번째 매개변수는 그래디언트의 시작 방향이며, 그래디언트의 종료 방향이 뒤에 올 필요는 없습니다. 위에서 아래로 또는 왼쪽에서 오른쪽으로

두 번째 매개변수는 그라데이션이 시작되는 색상입니다.

세 번째 매개변수는 그라데이션이 끝나는 색상입니다.

2. stop() 함수의 선형 그래디언트를 추가합니다

p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
 #1a82f7 85%, red);/* Safari, Chrome*/

background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Firefox*/

background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Opera, Opera mobile*/
}

로그인 후 복사

위 코드의 의미는 왼쪽의 15%에서 50%, 그리고 85%, 마지막으로 오른쪽으로 색상 그라데이션의 순서는 파란색에서 #1a82f7, #2F2727, #1a82f7, 그런 다음 빨간색입니다.

3. 방사형 그라데이션(원의 중심에서 원의 바깥쪽으로)

p{
width:200px;
height:200px;
padding:5px;
border:1px solid #ccc;
background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/
background:-moz-radial-gradient(circle, blue, red);/* Firefox*/
}

로그인 후 복사

위 코드의 의미는 파란색에서 파란색으로 빨간색, 원의 중심에서 주변 방사형 그라데이션으로 확산됩니다.

매개변수 원을 타원으로 변경하면 타원형 방사형 그라데이션이 됩니다.

4. IE 브라우저를 향한 배경 그라데이션

IE 브라우저는 IE 자체 필터를 사용하여 그라데이션을 얻을 수 있습니다.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

로그인 후 복사

첫 번째 매개변수: 그라데이션 시작 위치의 색상

두 번째 매개변수: 그라데이션의 끝 위치 색상

세 번째 매개변수; : 그라디언트 유형, 0은 수직 그라디언트, 1은 수평 그라디언트를 나타냅니다.

참고: IE 브라우저의 배경 그라데이션 설정은 배경으로 설정할 필요가 없으며 필터를 직접 사용하면 됩니다.

CSS3의 배경 그라데이션 기능은 강력하지만 브라우저 호환성 문제도 있습니다. CSS3 배경 그라데이션 속성에 대한 현재 특정 지원은 IE10, FireFox3.6+, Safari4.0+, Chrome, Opera11.1(방사형 그라데이션은 아직 지원되지 않음)+, IOS 3.2+, Opera Mobile11.1, Android입니다. 따라서 CSS3를 사용하여 배경 그라데이션을 만들 때 브라우저 호환성에 주의할 필요가 있습니다.

위 내용은 CSS3을 사용하여 배경 그라데이션 방법 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!