CSS3에서 구를 구현하는 방법: 1. 너비와 높이가 동일한 정사각형 요소를 만들고 border-radius 속성을 사용하여 원으로 설정합니다. 2. "배경:방사형-그라디언트(... )" 문을 사용하여 원으로 설정합니다. 방사형 그라데이션 배경색을 요소에 추가하여 구형 효과를 얻습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 구를 구현하는 단계:
1. 기본 모양
먼저 기본 원을 구현해 보겠습니다.
<figure class="circle"></figure>
여기서 사용되는 것은 새로운 태그 그림입니다. HTML5에서는 다른 라벨을 사용할 수도 있습니다. 그림 태그는 웹 페이지에 그림이나 기타 그래픽 콘텐츠를 표시하는 데 특별히 사용됩니다. 원형 효과를 얻으려면 몇 가지 기본 스타일을 추가하세요.
.circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0; }
2. 방사형 그래디언트
기본 원형 효과는 위에서 구현되었으며, 여기에 방사형 그래디언트 효과를 추가하여 더욱 사실적인 구를 구현했습니다.
.circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0; background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000); background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000); background: radial-gradient(100px 100px, circle, #5cabff, #000); }
3. 입체감을 높이기 위해 그림자를 추가합니다
앞선 부분에서 기본적인 구형 효과를 제작하여 입체감을 높이기 위해 하단에 그림자를 추가했습니다. 공의 입체감이 더욱 강해집니다.
여기서 사용된 HTML 코드는 다음과 같습니다.
<section class="stage"> <figure class="circle"><span class="shadow"></span></figure> </section>
CSS 코드는 다음과 같습니다.
.stage { width: 300px; height: 300px; display: inline-block; margin: 20px; -webkit-perspective: 1200px; -webkit-perspective-origin: 50% 50%; } .circle .shadow { position: absolute; width: 100%; height: 100%; background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); -webkit-transform: rotateX(90deg) translateZ(-150px); z-index: -1; }
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3 영역을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!