CSS는 붉은 심장을 그립니다.

이번에는 빨간 하트를 그리는 CSS를 가져오겠습니다. CSS로 빨간 하트를 그릴 때 주의사항은 무엇인가요?

1단계:

먼저 정사각형을 그립니다. 그림에 표시된 대로:

nbsp;html>


    <meta>
    <title>css画桃心</title>
    <style>
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
        }
    </style>


    <p>
        </p><p></p>
    

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

css3 다중 클래스 선택기 사용에 대한 자세한 설명

CSS에서 배경 첨부 사용에 대한 자세한 설명

부트스트랩 구현 가격표

위 내용은 CSS는 붉은 심장을 그립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!