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 중국어 웹사이트의 기타 관련 기사를 참조하세요!