이미지 그라디언트에 비해 CSS 기반 그라디언트의 가장 큰 장점은 수정이 쉽고 무단계 스케일링을 지원하여 전환이 더 자연스럽다는 것입니다. 현재 Webkit 및 Gecko 엔진 기반 브라우저에서만 CSS 그래디언트를 구현할 수 있으며, Presto 엔진 기반 Opera 브라우저는 당분간 Trident 기반 IE에서는 필터를 통해 그래디언트를 지원하지 않지만 권장되지 않습니다.
Webkit 엔진용 CSS 그라데이션 디자인(Safari 4 이상)
기본 구문:
-webkit-gradient(
매개변수 설명:
선형 그래디언트의 기본 사용법:
/*간단한 선형 그래디언트 배경색, 위에서 아래로, 파란색에서 빨간색으로 그래디언트 표시*/배경: -webkit-gradient(linear, left top , 왼쪽 하단, from(파란색), to(빨간색));
데모 효과:
/*위부터 중간, 중간에서 아래쪽, 파란색에서 녹색, 빨간색으로 그라데이션 표시*/배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(파란색), to(빨간색), 색상- 중지(50%, 녹색));
시연 효과:
/*위에서 아래로 이중 그라데이션 디자인, 먼저 그라데이션 표시는 파란색에서 흰색으로, 그런 다음 검은색에서 빨간색으로 표시됩니다. */배경: -webkit-gradient(linear, left top, left Bottom, from(blue), to(red),color-stop(0.5, # fff), color-stop(0.5, #000));
데모 효과:
/*다른 설정으로 단계 값을 통해 위에서 아래로, 처음에는 파란색에서 흰색으로, 다음에는 Baise에서 검정색으로, 마지막으로 검정색에서 빨간색으로 여러 그라데이션 효과를 디자인합니다. */배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from (blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));
데모 효과:
요약: color-stop() 함수에는 두 개의 매개변수 값이 포함되어 있습니다. 첫 번째 매개변수 값은 모서리 표시 위치를 지정하고 두 번째 매개변수는 색상 표시 색상을 지정합니다. 그라데이션에는 여러 색상 정지점이 포함될 수 있습니다. 위치 값은 0과 1 사이의 소수점 또는 0과 100% 사이의 백분율로 색상 정지점의 위치 비율을 지정합니다.
방사형 그래디언트의 기본 사용법
/*동심원(중심 좌표는 200, 100), 내부 원 반경은 10, 외부 원 반경은 100, 내부 원은 보다 작습니다. 외부 원 반경, 내부 원 빨간색에서 외부 원 녹색까지의 방사형 그래디언트, 외부 원 반경을 초과하면 녹색으로 표시되고 내부 원은 빨간색으로 표시됩니다*/배경: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));
효과 표시:
/*동심원 (중심좌표는 200, 100), inside 원의 반지름은 100, 바깥쪽 원의 반지름은 100, 안쪽 원은 바깥쪽 원의 반지름보다 작고 방사형 그라데이션은 안쪽의 빨간색에서 변경됩니다. 바깥쪽 원에서 녹색으로 원을 그리세요. 내부 원과 외부 원의 반경이 동일하면 그라데이션이 유효하지 않습니다*/배경: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));
시연 효과:
/* 동심원(중심 좌표는 200, 100), 내부 원 반경은 100, 외부 원 반경은 10이고, 내부 원은 외부 원의 반경보다 크며, 방사형 그라데이션은 내부 원의 빨간색에서 외부 원의 녹색까지 반경이 내부 원을 초과하면 빨간색으로 표시됩니다. 외부 원은 녹색으로 표시됩니다. */
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));
시연효과:
/* 비동심원의 경우 내부 원의 중심과 외부 원의 중심 사이의 거리가 두 원의 반지름 차이보다 작은 경우, 위에 표시된 효과가 표시되어 점점 가늘어지는 방사형 그라데이션 효과를 보여줍니다. 원뿔의 선명도는 두 원*/배경의 중심 사이의 거리에 비례합니다: -webkit-gradient(방사형, 120 100, 10, 200 100, 100, from(red), to(green));
시연 효과:
/* 동심원, 안쪽 원에서 바깥쪽 중앙 90%까지 파란색 색상 추가 원, 즉 외부 링 마크로부터의 거리 내에서 아래 그림과 같이 다층 방사형 그라데이션을 디자인합니다. */배경: -webkit-gradient(방사형, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));
시연 효과:
/*to() 함수의 색상 값을 투명으로 설정하면 다양한 원형 효과를 디자인할 수 있습니다*/배경: - 웹킷- 그래디언트(방사형, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));
시연 효과:
/*to() 함수의 색상 값을 투명하게 설정하고 유사한 색상을 디자인하면 구형 효과를 디자인할 수 있습니다*/배경: -webkit-gradient( 방사형, 180 80, 10 , 200 100, 90, from(#00C), to(rgba(1,159,98,0)), 색상 정지(98%, #0CF));
데모 효과:
/*배경 이미지에 대해 여러 방사형 그라데이션을 정의하면 아래와 같이 여러 버블 효과를 디자인할 수 있습니다.*/배경: -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 ;
시연 효과:
그라디언트 적용으로 그라디언트 효과의 경계 정의
코드:
<!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>
데모 효과:
내용 채우기 효과 정의
코드:
<!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>
표시 효과:
정의 목록 아이콘
<!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) 관련 글은 PHP 중국어 홈페이지를 주목해주세요!
'Podcast 구독'링크는 어디에서 링크해야합니까?Apr 16, 2025 pm 12:04 PM한동안 iTunes는 팟 캐스팅에서 큰 개 였으므로 "Podcast 구독"을 링크 한 경우 다음과 같습니다.
브라우저 엔진 다양성Apr 16, 2025 pm 12:02 PM우리는 그들이 2013 년에 크롬에 갔을 때 오페라를 잃었습니다. 올해 초 크롬 (Chrome)에 갔을 때 Edge와 같은 거래를했습니다. Mike Taylor는 이러한 변화를 "감소 적으로"불렀습니다
웹 공유에 대한 UX 고려 사항Apr 16, 2025 am 11:59 AMTrashy Clickbait 사이트에서 가장 8 월 출판물에 이르기까지 공유 버튼은 웹 전체에서 오랫동안 어디서 유비쿼터스되었습니다. 그럼에도 불구하고 이것들은 논쟁의 여지가 있습니다
Weekly Platform News : Apple은 웹 구성 요소, 프로그레시브 HTML 렌더링, 자체 호스팅 중요한 리소스를 배포합니다.Apr 16, 2025 am 11:55 AM이번 주에 Apple은 웹 구성 요소, Instagram이 Insta-Loading 스크립트의 방법 및 자조적 자체 호스팅 리소스를 생각하기위한 음식을 웹 구성 요소에 들어갑니다.
Git Pathspecs 및 사용 방법Apr 16, 2025 am 11:53 AMGIT 명령의 문서를 살펴 보았을 때 많은 사람들이 옵션이 있음을 알았습니다. 나는 처음에 이것이 단지 a라고 생각했다
제품 이미지를위한 컬러 피커Apr 16, 2025 am 11:49 AM어려운 문제가 어려운 것 같지 않습니다. 우리는 종종 수천 가지 색상의 제품 샷을 가지고 있으므로 우리는 다음과 같이 뒤집을 수 있습니다. 우리도 아닙니다
Dark Mode는 React 및 Temprovider로 전환합니다Apr 16, 2025 am 11:46 AM웹 사이트에 어두운 모드 옵션이있을 때 좋아합니다. 다크 모드는 웹 페이지를 더 쉽게 읽을 수있게하고 눈이 더 편안하다고 느끼도록 도와줍니다. 많은 웹 사이트를 포함합니다
HTML 대화 요소와 함께 일부 실습Apr 16, 2025 am 11:33 AM이것은 처음으로 HTML 요소를보고 있습니다. 나는 그것을 잠시 동안 알고 있었지만 아직 스핀을 위해 그것을 가져 갔다. 그것은 꽤 시원하고 있습니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
Dreamweaver Mac版
시각적 웹 개발 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
