지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

青灯夜游
풀어 주다： 2023-01-05 16:12:31
원래의
2632명이 탐색했습니다.

CSS에서 방사형 그라디언트를 나타내는 속성은 "radial-gradient()"입니다. 방사형 그라디언트를 중심점으로 정의하려면 두 개의 끝 색상을 설정해야 하며 구문은 "radial-gradient"입니다. (위치의 모양 크기, 시작 색상,...,끝 색상)".

CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3 Radial Gradient

CSS3 방사형 그래디언트와 선형 그래디언트는 매우 유사합니다. 먼저 syntax를 살펴보겠습니다. 

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
로그인 후 복사

선형 그래디언트에서 이미 본 것 외에도 시작 위치, 방향 및 색상, 방사형 그라데이션을 사용하면 그라데이션의 모양(원 또는 타원)과 크기(가장 가까운 쪽, 가장 가까운 쪽, 가장 가까운 쪽, 가장 가까운 쪽)를 지정할 수 있습니다. 씌우다)). 색상 중지점: 선형 그래디언트와 마찬가지로 그래디언트 선을 따라 그래디언트의 시작 및 끝 색상을 정의해야 합니다. 구체적인 사용법을 더 잘 이해하기 위해 주로 다양한 예를 통해 CSS3 방사형 그래디언트의 구체적인 사용법을 비교합니다.

효과는 다음과 같습니다.

위 두 예제의 코드에서 시작과 끝이 같은 것을 알 수 있었는데, 두 번째 예제에서는 왜 이렇게 큰 데이터가 나오는지 알 수 있었습니다. 차이점? 실제로 방사형 그래디언트의 시작 색상과 끝 색상은 동일하지만 위치를 설정하지 않으면 기본 색상의 간격이 균등해집니다. 이는 이전 선형 그래디언트와 동일하지만 그래디언트 위치가 설정된 경우에는 다음과 같습니다. 그라데이션 위치. 이것이 예제 1과 예제의 차이점입니다. 원의 시작 색상과 끝 색상이 동일하지만 예제 1에서는 기본 색상이 균등한 간격의 그라데이션이지만 예제 2에서는 각 색상이 특정 위치를 갖습니다. .

CSS의 어떤 속성이 방사형 그래디언트를 나타내는지예 3: 

background: -moz-radial-gradient(#ace, #f96, #1E90FF);
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
로그인 후 복사
로그인 후 복사

효과는 다음과 같습니다.

CSS의 어떤 속성이 방사형 그래디언트를 나타내는지예 4: 

background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
로그인 후 복사

효과는 다음과 같습니다.

예 3 및 예제 4, 효과부터 시작합니다. 모양이 서로 다른 것을 알 수 있습니다. 예제는 3방향 원이고 예제는 4방향 타원형이므로 모양에 차이가 있음을 의미합니다. 그러나 두 예제의 코드로 돌아가면 예제 3에서는 모양이 원으로 설정되어 있고 예제 4에서는 타원, 즉 방사형 그래디언트에서 모양을 설정할 수 있음이 분명합니다. 예제 5에서 그리고 예제 6의 코드에서 우리는 예제 5에서는 가장 가까운 쪽을 사용했고 예제 6에서는 가장 먼 쪽을 사용했다는 것을 분명히 알 수 있습니다. 이런 식으로 우리는 방사형 그래디언트에서 크기(Size)를 설정할 수도 있다는 것을 알 수 있습니다. 크기에 대한 다양한 옵션(가장 가까운 쪽, 가장 가까운 쪽, 가장 먼 쪽, 가장 먼 쪽, 포함 또는 덮개)은 원이나 타원 크기의 점을 정의하는 데 사용되는 것입니다. 예: 타원의 가까운 쪽과 먼 모서리 아래의 두 타원은 크기가 다릅니다. 예제 5는 시작점(중앙)에서 가까운 가장자리까지의 거리로 설정되는 반면, 예제 6은 시작점(중심)에서 먼 모서리까지의 거리로 설정됩니다.

예 7: 

background: -moz-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
로그인 후 복사
CSS의 어떤 속성이 방사형 그래디언트를 나타내는지효과는 다음과 같습니다.

CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

示例八：

background: -moz-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
로그인 후 복사

效果如下：

CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

示例七和示例八主要演示了圆的近边VS远边 ，示例七的圆的渐变大小由起始点(center)到近边的距离决定，而示例八的圆则有起始点到远边的距离决定。

示例九：

background: -moz-radial-gradient(#ace, #f96, #1E90FF);
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
로그인 후 복사
로그인 후 복사

效果如下：

CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

示例十：

background: -moz-radial-gradient(contain, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(contain, #ace, #f96, #1E90FF);
로그인 후 복사

效果如下：

CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

示例九和示例十演示了包含圆 。在这里你可以看到示例九的默认圈，同一渐变版本，但是被包含的示例十的圆。

最后我们在来看两个实例一个是应用了中心定位和full sized,如下所示：

/* Firefox 3.6+ */ 
 background: -moz-radial-gradient(circle, #ace, #f96); 
 /* Safari 4-5, Chrome 1-9 */ 
 /* Can&#39;t specify a percentage size? Laaaaaame. */ 
 background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ace), to(#f96)); 
 /* Safari 5.1+, Chrome 10+ */ 
 background: -webkit-radial-gradient(circle, #ace, #f96);
로그인 후 복사

效果如下：

1CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

下面这个实例应用的是Positioned, Sized，请看代码和效果：

/* Firefox 3.6+ */ 
/* -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* ) */
background: -moz-radial-gradient(80% 20%, closest-corner, #ace, #f96); 
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#ace), to(#f96)); 
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(80% 20%, closest-corner, #ace, #f96);
로그인 후 복사

效果如下：

1CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

到此关于 CSS3 的两种渐变方式我们都介绍完了。再浪费大家一点时间，我们看看CSS3 重复渐变（Repeating Gradient）的应用。

如果您想重复一个渐变，您可以使用-moz-repeating-linear-gradient（重复线性渐变）和-moz-repeating-radial-gradient（重复径向渐变）。 在下面的例子，每个实例都指定了两个起止颜色，并无限重复。

background: -moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
background: -moz-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
background: -webkit-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
로그인 후 복사

效果：

1CSS의 어떤 속성이 방사형 그래디언트를 나타내는지 CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

有关于CSS3渐变的东西就完了，大家看完了肯定会想，他主要用在哪些方面呢？这个说起来就多了，最简单的就是制作背景，我们还可以应用其制作一些漂亮的按钮，还可以用他来制作patterns，我在这里列出几种制作patterns的示例代码吧：

HTML代码：

<ul>
   <li class="gradient gradient1"></li>
   <li class="gradient gradient2"></li>
   <li class="gradient gradient3"></li>
   <li class="gradient gradient4"></li>
   <li class="gradient gradient5"></li>
   <li class="gradient gradient6"></li>
</ul>
로그인 후 복사

CSS 代码：

ul {
  overflow: hidden;
  margin-top: 20px;
}
li{
  width: 150px;
  height: 80px;
  margin-bottom: 10px;
  float: left;
  margin-right: 5px;
  background: #ace;
  /*Controls the size*/
  -webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  background-size: 20px 20px;
}
     
li.gradient1 {
  background-image: -webkit-gradient(
    linear,
    0 100%, 100% 0,
    color-stop(.25, rgba(255, 255, 255, .2)),
    color-stop(.25, transparent),
    color-stop(.5, transparent),
    color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.75, rgba(255, 255, 255, .2)),
    color-stop(.75, transparent),
    to(transparent)
    );
  background-image: -moz-linear-gradient(
    45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
    );
  background-image: -o-linear-gradient(
    45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    gba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
    );
}
 
li.gradient2 {
   background-image: -webkit-gradient(linear, 0 0, 100% 100%,
      color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
      color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
      to(transparent));
   background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
}
     
li.gradient3 {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
     
li.gradient4 {
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
     
li.gradient5 {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
  background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
     -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
     -moz-linear-gradient(45deg, transparent 75%, #555 75%),
     -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
     -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
     -o-linear-gradient(45deg, transparent 75%, #555 75%),
     -o-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(45deg, transparent 75%, #555 75%),
    linear-gradient(-45deg, transparent 75%, #555 75%);
}
     
li.gradient6 {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
     -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
  background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
     -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
     -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
     linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}
로그인 후 복사

效果：

CSS의 어떤 속성이 방사형 그래디언트를 나타내는지

不错的效果吧，当然感兴趣的朋友可以到这里学习制作更多的不同效果。

（学习视频分享：css视频教程）

위 내용은 CSS의 어떤 속성이 방사형 그래디언트를 나타내는지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css 방사형 그라데이션
원천：php.cn
이전 기사：CSS에서 스크롤 막대를 비활성화하는 방법 다음 기사：CSS는 어떤 언어인가요?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1335
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
다른 CSS 코드가 무엇이든 관계없이 Flexbox의 텍스트를 수직 중앙에 강제로 배치할 수 있는 방법이 있나요? 제가 개발 중인 웹사이트에 사용되는 더 큰 CSS 코드의 일부인 다음 CSS 코드가 있습니다. .cards-u{display:flex;flex-wrap:wrap;...
에서 2024-04-06 20:41:51
0
1
518
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿