CSS3 선형 그래디언트는 4개의 연결된 링을 구현합니다(코드 예).

이 글의 목표:

1. CSS3에서 선형 그라데이션 구현 방법을 마스터하세요.

질문:

순수 DIV+CSS를 사용하여 다음 효과를 얻으려면 지식 포인트 선형 그라데이션을 사용해야 합니다. 중앙에 표시

추가 사항:

1. 컬러링의 크기는 400px*400px이고, 내부의 빈 링의 크기는 260px*260px

2입니다. 고리와 왼쪽 고리는 120px

3입니다. 아래쪽 고리와 위쪽 고리 사이의 위쪽 이동 거리는 20px

아이디어 분석:

1 가장 바깥쪽 레이어는 녹색 테두리가 있는 div입니다. 4개의 링으로 감싸져 있습니다

2 div는 위쪽과 아래쪽으로 나누어져 있는데, 위쪽 부분만 구현하면 아래쪽 부분은 실제로 복사가 가능하지만 여백 윗부분은 그대로 복사해야 합니다. 변경됨

3. 각 링은 실제로 동일하며 위치만 다릅니다. 따라서 하나의 그래디언트 링만 구현하면 다른 모든 링은 첫 번째 링을 복사할 수 있습니다.

이제 특정 작업을 수행해 보겠습니다

1. .html을 작성하고 아키텍처

아키텍처 아이디어를 작성하세요.

1. 외부 컨테이너는 .container 컨테이너라고 하며, .top과 .bottom의 두 부분으로 나뉩니다. 각 부분에는 두 개의 div 링,

두 개의 div가 있습니다. 링은 수평으로 배열되어야 하므로 float가 반드시 필요합니다. float이므로 float를 지우려면 컨테이너 끝에 .clear div를 추가해야 합니다. 이렇게 하면 컨테이너가 두 개의 float를 계속 래핑할 수 있습니다. ring divs

2. 각 링은 실제로 외부 색상 링과 내부 작은 흰색 링의 두 부분으로 구성됩니다.

분석에 따르면 다음 아키텍처 코드가 얻어집니다

2. style

1. 모든 CSS 파일을 쉽게 관리할 수 있도록 CSS 폴더를 만듭니다. 여기에 스타일을 작성하는 방법은 다음과 같습니다.

1. 분석을 생각해보세요

1. 컨테이너에 있는 모든 요소의 공통 스타일을 설정하려면 이러한 공개 코드를 .container * 스타일에 작성할 수 있습니다.

그러므로 index.css에 다음과 같이 코드를 추가하세요.

.container *{ padding:0; margin: 0; }

2. colorcircle

사고 분석

1. 요구 사항에 따라 너비: 400px, 높이: 400px이므로 원형이므로 테두리 둥근 모서리를 400px, 즉 border-radius: 400px;,

2. 배경은 7가지 색상이므로 선 그라데이션을 사용해야 하며, 색상 그라데이션은 왼쪽부터 빨간색, 주황색, 노란색, 녹색, 파란색, 보라색이므로 코드는 background-image:linear-gradient( 왼쪽, 빨간색, 주황색, 노란색, 녹색, 파란색, 남색, 보라색);

3. 그런 다음 둥근 모서리를 사용하고 테두리를 설정해야 합니다. 그렇지 않으면 적용되지 않지만 테두리는 투명합니다. 따라서 코드는 border: 1px solid transparent입니다.

4. 링이 평행하게 정렬되도록 하려면 float :left

분석에 따라 index.css에 코드를 계속 추가하세요.

.colorcircle{ width:400px; height:400px; border-radius: 400px; background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); border:1px solid transparent; float: left; }

3. 링 안의 작은 흰색 원.smallcircle

아이디어 분석:

1. 요구 사항에 따라 너비: 260px, 높이: 260px이므로 테두리를 설정해야 합니다. 둥근 모서리를 260px, 즉 border-radius: 260px;, background-color: white;

중앙에 맞춰야 하기 때문에 왼쪽 간격과 위쪽 간격은 70px =(400-260)/2

2입니다. 그런 다음 둥근 모서리가 사용되고 테두리를 설정해야 합니다. 그렇지 않으면 적용되지 않지만 테두리가 투명하므로 변환된 코드는 border: 1px solid transparent;

계속해서 색인에 다음 코드를 추가합니다. css:

.smallcircle{ width: 260px; height: 260px; border-radius: 260px; background-color: white; margin:70px auto; border:1px solid transparent; }

4. .clear 스타일

아이디어 분석:

1. Float를 지워야 하므로 float:none,clear:both

2. 레이아웃에 영향을 주지 않습니다. 너비와 높이를 0

다음과 같이 계속해서 index.css에 코드를 추가해야 합니다.

.clear{ clear: both; float: none; width: 0; height: 0; }

5. 오른쪽 Circle.circle2

아이디어 분석:

1. 요구 사항에 따라 왼쪽 이동 양은 120px이므로 margin-left:-120px

다음과 같이 index.css에 코드를 계속 추가합니다.

.circle2{ margin-left:-120px; }

6. 하단 부분.bottom

사고 분석:

1. 요구사항에 따르면 위쪽 이동량은 20px이므로 margin-top:-20px

다음과 같이 index.css에 코드를 계속 추가하세요.

.bottom{ margin-top:-20px; }

7. 모든 것이 중앙에 위치해야 하므로 코드로 변환하세요. margin:0 auto ; border: 1px solid green

2 중앙에 위치시키려면, 너비를 설정해야 합니다. width=684px(400+400+4 [ring 4 borders] -120), height=784(400+400+4【Ring 4 borders】-20)

계속해서 다음 코드를 추가하세요 index.css에:

.container{ border:1px solid green; width:684px; margin:0 auto; height: 784px; }

지금까지 index.css의 모든 내용은 다음과 같습니다.

.container *{ padding:0; margin: 0; } .colorcircle{ width:400px; height:400px; border-radius: 400px; background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); border:1px solid transparent; float: left; } .smallcircle{ width: 260px; height: 260px; border-radius: 260px; background-color: white; margin:70px auto; border:1px solid transparent; } .clear{ clear: both; float: none; width: 0; height: 0; } .circle2{ margin-left:-120px; } .bottom{ margin-top:-20px; } .container{ border:1px solid green; width:684px; margin:0 auto; height: 784px; }

그런 다음 index.html에 index.css를 도입하세요

실행 결과는 다음과 같습니다.

发现下面部分.bottom的margin-top好像失效了，其实如果我们将.bottom的border设置成红色，可以看出，其实也是上移了20px，但是因为里面圆环是float的，且默认的postion为relative,所以圆环是无法再上移的，怎么办呢？这里提供两种解决方案：

1、我们将.bottom的postion设置为absoute

index.css中.bottom代码修改如下：

.bottom{ margin-top:-20px; position: absolute; }

我们再来运行效果：

我们发现效果实现了

还有一种方法就是

2、通过让.top,.bottom上下两个div都float:left，也可以解决，只不过这样在.container的最后需要添加.clear 块

index.html代码修改如下：

index.css代码如下：

.container *{ padding:0; margin: 0; } .colorcircle{ width:400px; height:400px; border-radius: 400px; background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); border:1px solid transparent; float: left; } .smallcircle{ width: 260px; height: 260px; border-radius: 260px; background-color: white; margin:70px auto; border:1px solid transparent; } .clear{ clear: both; float: none; width: 0; height: 0; } .circle2{ margin-left:-120px; } /* 解决上移问题 */ .bottom{ margin-top:-20px; float: left; } .top{ float: left; } /* end */ .container{ border:1px solid green; width:684px; margin:0 auto; height: 784px; }

运行结果为：

效果还是一样的

到此为止，我们就实现了全部的需求

总结：

1、学习了CSS3中线线渐变的语法如

linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

其中方向left也可以是right,后面的颜色，可以2个或者3个都可以自定义

希望本文能给大家带来一定的帮助，谢谢！！！

위 내용은 CSS3 선형 그래디언트는 4개의 연결된 링을 구현합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!