'CSS3 실용적인 전투' 노트--그라디언트 디자인 (1)-CSS 튜토리얼-php.cn

집

'CSS3 실용적인 전투' 노트--그라디언트 디자인 (1)

Dec 20, 2016 pm 02:49 PM

이미지 그라디언트에 비해 CSS 기반 그라디언트의 가장 큰 장점은 수정이 쉽고 무단계 스케일링을 지원하여 전환이 더 자연스럽다는 것입니다. 현재 Webkit 및 Gecko 엔진 기반 브라우저에서만 CSS 그래디언트를 구현할 수 있으며, Presto 엔진 기반 Opera 브라우저는 당분간 Trident 기반 IE에서는 필터를 통해 그래디언트를 지원하지 않지만 권장되지 않습니다.

Webkit 엔진용 CSS 그라데이션 디자인(Safari 4 이상)

기본 구문:

-webkit-gradient(,[, &lt ;radius>]?,[,]?[,]*)

매개변수 설명:

: 선형 그라데이션(선형) 및 방사형 그라데이션(방사형)을 포함하여 그라데이션 유형을 정의합니다.

: 그라디언트의 시작점과 끝점 좌표, 즉 그라디언트가 적용되기 시작하는 x축, y축 좌표와 그라디언트가 끝나는 좌표를 정의합니다. . 이 매개변수는 (0, 0) 또는 (왼쪽, 위쪽) 등과 같은 숫자 값, 백분율 및 키워드를 지원합니다. 키워드에는 위쪽, 아래쪽, 왼쪽 및 오른쪽이 포함됩니다.

: 방사형 그래디언트를 정의할 때 방사형 그래디언트의 길이를 설정하는 데 사용됩니다. 이 매개변수는 숫자 값입니다.

: 그라데이션 색상과 단계 크기를 정의합니다. 여기에는 세 가지 유형의 값이 포함됩니다. 즉, from(색상 값) 함수를 사용하여 정의된 시작 색상, to(색상 값) 함수를 사용하여 정의된 끝 색상, 색상 단계, color-stop(값, 색상 값)을 사용하여 정의됩니다. ). color-stop()에는 두 개의 매개변수 값이 포함됩니다. 첫 번째 매개변수 값은 숫자 값 또는 백분율 값이고 값 범위는 0~1.0(또는 0%~100%)이며 두 번째 매개변수 값은 색상 값을 나타냅니다.

선형 그래디언트의 기본 사용법:

/*간단한 선형 그래디언트 배경색, 위에서 아래로, 파란색에서 빨간색으로 그래디언트 표시*/배경: -webkit-gradient(linear, left top , 왼쪽 하단, from(파란색), to(빨간색));

데모 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/*위부터 중간, 중간에서 아래쪽, 파란색에서 녹색, 빨간색으로 그라데이션 표시*/배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(파란색), to(빨간색), 색상- 중지(50%, 녹색));

시연 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/*위에서 아래로 이중 그라데이션 디자인, 먼저 그라데이션 표시는 파란색에서 흰색으로, 그런 다음 검은색에서 빨간색으로 표시됩니다. */배경: -webkit-gradient(linear, left top, left Bottom, from(blue), to(red),color-stop(0.5, # fff), color-stop(0.5, #000));

데모 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/*다른 설정으로 단계 값을 통해 위에서 아래로, 처음에는 파란색에서 흰색으로, 다음에는 Baise에서 검정색으로, 마지막으로 검정색에서 빨간색으로 여러 그라데이션 효과를 디자인합니다. */배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from (blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));

데모 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

요약: color-stop() 함수에는 두 개의 매개변수 값이 포함되어 있습니다. 첫 번째 매개변수 값은 모서리 표시 위치를 지정하고 두 번째 매개변수는 색상 표시 색상을 지정합니다. 그라데이션에는 여러 색상 정지점이 포함될 수 있습니다. 위치 값은 0과 1 사이의 소수점 또는 0과 100% 사이의 백분율로 색상 정지점의 위치 비율을 지정합니다.

방사형 그래디언트의 기본 사용법

/*동심원(중심 좌표는 200, 100), 내부 원 반경은 10, 외부 원 반경은 100, 내부 원은 보다 작습니다. 외부 원 반경, 내부 원 빨간색에서 외부 원 녹색까지의 방사형 그래디언트, 외부 원 반경을 초과하면 녹색으로 표시되고 내부 원은 빨간색으로 표시됩니다*/배경: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));

효과 표시:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/*동심원 (중심좌표는 200, 100), inside 원의 반지름은 100, 바깥쪽 원의 반지름은 100, 안쪽 원은 바깥쪽 원의 반지름보다 작고 방사형 그라데이션은 안쪽의 빨간색에서 변경됩니다. 바깥쪽 원에서 녹색으로 원을 그리세요. 내부 원과 외부 원의 반경이 동일하면 그라데이션이 유효하지 않습니다*/배경: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));

시연 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/* 동심원(중심 좌표는 200, 100), 내부 원 반경은 100, 외부 원 반경은 10이고, 내부 원은 외부 원의 반경보다 크며, 방사형 그라데이션은 내부 원의 빨간색에서 외부 원의 녹색까지 반경이 내부 원을 초과하면 빨간색으로 표시됩니다. 외부 원은 녹색으로 표시됩니다. */
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));

시연효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/* 비동심원의 경우 내부 원의 중심과 외부 원의 중심 사이의 거리가 두 원의 반지름 차이보다 작은 경우, 위에 표시된 효과가 표시되어 점점 가늘어지는 방사형 그라데이션 효과를 보여줍니다. 원뿔의 선명도는 두 원*/배경의 중심 사이의 거리에 비례합니다: -webkit-gradient(방사형, 120 100, 10, 200 100, 100, from(red), to(green));

시연 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/* 동심원, 안쪽 원에서 바깥쪽 중앙 90%까지 파란색 색상 추가 원, 즉 외부 링 마크로부터의 거리 내에서 아래 그림과 같이 다층 방사형 그라데이션을 디자인합니다. */배경: -webkit-gradient(방사형, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));

시연 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/*to() 함수의 색상 값을 투명으로 설정하면 다양한 원형 효과를 디자인할 수 있습니다*/배경: - 웹킷- 그래디언트(방사형, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));

시연 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/*to() 함수의 색상 값을 투명하게 설정하고 유사한 색상을 디자인하면 구형 효과를 디자인할 수 있습니다*/배경: -webkit-gradient( 방사형, 180 80, 10 , 200 100, 90, from(#00C), to(rgba(1,159,98,0)), 색상 정지(98%, #0CF));

데모 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

/*배경 이미지에 대해 여러 방사형 그라데이션을 정의하면 아래와 같이 여러 버블 효과를 디자인할 수 있습니다.*/배경: -webkit-gradient( 방사형, 45 45 , 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), 색상 정지(90%, #019F62)), -webkit-gradient(방사형, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), 색상 중지(75%, #ff0188)), -webkit-gradient(방사형, 95 15, 15 , 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), 색상 중지(80%, #00b5e2)), -webkit-gradient(방사형, 300 110, 10, 300 100, 100 , from(# f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)) -webkit-배경-원산지: 패딩 상자; : content-box ;

시연 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

그라디언트 적용으로 그라디언트 효과의 경계 정의

코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
div {
 border-width: 20px;
 width: 400px;
 height: 200px;
 margin: 20px;
 -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;
}
</style>
</head>
 
<body>
<div></div>
</body>
</html>

로그인 후 복사

데모 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

내용 채우기 효과 정의

코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
.div1 {
 width:400px;
 height:200px;
 border:10px solid #A7D30C;
 background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
 float:left;
}
.div1::before {
 width:400px;
 height:200px;
 border:10px solid #019F62;
 content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62));
 display: block;
}
</style>
</head>
 
<body>
<div class="div1">透视框</div>
</body>
</html>

로그인 후 복사

표시 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)

정의 목록 아이콘

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webkit引擎的渐变实现方法</title>
<style type="text/css">
ul {
 list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))
}
</style>
</head>
 
<body>
<ul>
 <li>新闻列表项1</li>
 <li>新闻列表项2</li>
 <li>新闻列表项3</li>
 <li>新闻列表项4</li>
</ul>
</body>
</html>

로그인 후 복사

시연 효과:

CSS3 실용적인 전투 노트--그라디언트 디자인 (1)