이번에는 빨간 하트를 그리는 CSS를 가져오겠습니다. CSS로 빨간 하트를 그릴 때 주의사항은 무엇인가요?
1단계:
먼저 정사각형을 그립니다. 그림에 표시된 대로:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css画桃心</title> <style media="screen"> .heart-body { width: 500px; margin: 100px auto; position: relative; } .heart-shape { position: relative; width: 100px; height: 100px; background-color: #f70e0e; } </style> </head> <body> <p class="heart-body"> <p class="heart-shape"></p> </p> </body> </html>
2단계:
는 전후의 의사 요소를 사용하여 정사각형의 왼쪽과 상단에 정사각형을 그린 다음 테두리 반경을 사용합니다. : 50%; 속성, 이 두 사각형을 수정한 다음 그림과 같이 두 개의 원을 얻습니다.
.heart-shape:before, .heart-shape:after { position: absolute; content: ''; width: 100px; height: 100px; background-color: #ffc0cb; } .heart-shape:before { left: -45px; } .heart-shape:after { top: -45px; }
테두리 반경 사용: 50% 속성:
.heart-shape:before, .heart-shape:after { position: absolute; content: ''; width: 100px; height: 100px; -webkit-border-radius: 50%; /**兼容苹果;谷歌,等一些浏览器认*/ -moz-border-radius: 50%; /**兼容火狐浏览器*/ -o-border-radius: 50%; /**兼容opera浏览器*/ border-radius: 50%; background-color: #ffc0cb; }
3단계:
클래스 이름은 heart-shape p입니다. 그림과 같이 변환:rotate(45deg) 속성을 사용하여 45도 회전합니다.
.heart-shape { position: relative; width: 100px; height: 100px; background-color: #f70e0e; -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -ms-transform: rotate(45deg); /* IE 9 */ -o-transform: rotate(45deg); /* Opera */ transform: rotate(45deg); }
Xiaoying은 원의 배경색을 변경합니다. 그리고 사각형의 배경색 통일된 색상을 주지 않은 이유는 모두가 눈에 띄는 효과를 더 잘 볼 수 있도록 하기 위함입니다. 다음으로 샤오잉은 배경색을 통일된 색상으로 설정하여 그림과 같이 최종 사랑이 나왔습니다. 사진 속:
.heart-shape:before, .heart-shape:after { position: absolute; content: ''; width: 100px; height: 100px; -webkit-border-radius: 50%; /**兼容苹果;谷歌,等一些浏览器认*/ -moz-border-radius: 50%; /**兼容火狐浏览器*/ -o-border-radius: 50%; /**兼容opera浏览器*/ border-radius: 50%; background-color: #f70e0e; }
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 CSS는 붉은 심장을 그립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!