서문: 최근 나만의 웹페이지를 만들 예정입니다. 디자인 초안에 내비게이션을 직사각형으로 디자인할 예정인데, 일부 아바타를 포함하여 호버 스타일로 표시되는 직사각형도 있습니다. , 등. 원을 그리는 것 외에도 다른 모양을 진지하게 그려본 적이 없습니다. 오늘은 우리가 흔히 볼 수 있는 몇 가지 모양을 그려 보겠습니다.
그 전에 의사 요소가 무엇인지 이해해야 합니다(이와는 달리 의사 클래스 라는 또 다른 개념이 있는데 둘은 혼동하기 쉽습니다). 이 개념 없이는 그래픽을 그릴 수 없습니다. .
a) 의사 요소: 콘텐츠 요소 앞뒤에 추가 요소를 삽입하는 데 사용됩니다. 의사 요소라고 불리는 이유는 문서 내에서 전혀 생성되지 않고 외부에서만 볼 수 있기 때문입니다. : F12를 하면 오른쪽 코드박스에 보이시나요?
여기서 사용된 두 개의 의사 요소 ①요소 앞:before ②요소 뒤:after
1) Circle, no If 필요하다면 삼각형을 보자
/* CSS */ .sanjiao { width: 0px; height: 0px; margin: 30px auto; position: relative; border: 100px solid transparent; border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/ /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */ border-right: 100px solid #5E5E5E; border-top: 100px solid #3C98D1;*/ } /* HTML */<p class="sanjiao"></p>
2) 원기둥
/* CSS */ .yuanzhu { position: relative; height: 200px; width: 50px; background: #5E5E5E; margin: 30px auto; z-index: 999 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */ } .yuanzhu:before { position: absolute; top: -10px; content: ""; width: 50px; height: 20px; border-radius: 50%; background: #A8A8A8; z-index: 99 } .yuanzhu:after { position: absolute; bottom: -10px; content: ""; width: 50px; height: 20px; border-radius: 50%; background: #5E5E5E; z-index: 9 } /* HTML */ <div class="yuanzhu"></div>
3) Pentacle
Pentagram 그리기 , 먼저 스타일의 "deg" 뒤에 브라우저의 여러 개인 접두어가 회전 각도를 나타낸다는 것을 알아야 합니다. 예를 들어 "45deg"는 시계 방향 45도 회전을 나타내고 음수는 시계 반대 방향을 나타냅니다.
rotate는 transform의 속성 중 하나로 2차원 회전, 즉 2차원 회전을 나타내는 것도 3개 있습니다. -차원 회전, 변형에는 그 밖에도 여러 가지 기능이 있습니다. 잘 사용하면 생성되는 특수 효과가 상당히 고품질입니다.
으으오각별을 그릴 때는 꼭 설정하세요. content: ""; 그렇지 않으면 의사 클래스 요소가 표시하는 스타일을 볼 수 없습니다. 두 의사 클래스 요소는 모두 절대 위치 지정으로 설정되어야 합니다. 상위 요소는 상대 요소로 설정됩니다.
4) 채팅 상자
/* CSS */ .wujiaox { width: 0px; height: 0px; position: relative; margin: 30px auto; border: 100px solid transparent; border-bottom: 70px solid #5E5E5E; -webkit-transform: rotate(35deg);/* Safari和Chrome */ -moz-transform: rotate(35deg);/* Firefox */ -ms-transform: rotate(35deg);/* IE 9 */ -o-transform: rotate(35deg); /* Opera */ } .wujiaox:after { content: ""; width: 0px; height: 0px; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #5E5E5E; border-left: 100px solid transparent; position: absolute; top: 3px; left: -105px; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); } .wujiaox:before { content: ""; width: 0; height: 0; border-bottom: 80px solid #5E5E5E; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; top: -45px; left: -65px; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg);/* 逆时针旋转35度 */ -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } /* HTML */ <div class="wujiaox"></div>
5) Bagua 다이어그램은 실제로 큰 반원 + 두 개의 작은 원으로 구성됩니다
<span style="color: #000000">/* CSS */<br/> .chatBox { width: 200px; height: 50px; margin: 30px auto; background: #5E5E5E; border-radius: 5px; position: relative; } .chatBox:before { content: ""; position: absolute; width: 0px; height: 0px; right: 100%; top: 15px; border-top: 8px solid transparent; border-right: 10px solid #5E5E5E; border-bottom: 8px solid transparent; } <br/>/* HTML */<br/><p class="chatBox"></p> </span>
6) "Masonry" 그래픽
먼저 직각 사다리꼴을 그린 다음 의사 클래스 요소를 통해 그 아래에 삼각형을 그립니다.
/* CSS */ .bagua { width: 96px; height: 48px; background: #eee; margin: 30px auto; border-color: #000000; border-style: solid; border-radius: 100%; border-width: 0.5px 0.5px 50px 0.5px; position: relative; } .bagua:before { content: ""; border-radius: 100%; background: #FFFFFF; position: absolute; top: 50%; left: 0px; border: 18px solid #000000; width: 12px; height: 12px; } .bagua:after { content: ""; border-radius: 100%; background: #000000; position: absolute; top: 50%; left: 50%; border: 18px solid #eee; width: 12px; height: 12px; } /* HTML */<p class="bagua"></p>
CSS3에서 그래픽에 대해 이야기하는 방법은 여러 가지가 있습니다. 이 방법은 천천히 공부해야 하는 방법이지만, 심심할 때 그리는 것은 여전히 꽤 흥미롭습니다. 🎜>
위 내용은 일반적인 그래픽을 그리기 위한 CSS3의 새로운 기능 및 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!