> 웹 프론트엔드 > CSS 튜토리얼 > CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)

CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)

青灯夜游
풀어 주다: 2018-09-21 17:45:42
원래의
4321명이 탐색했습니다.

페이지 개발 시 페이지를 아름답게 하기 위해 작은 그래픽이 필요한 경우가 많습니다. 이러한 그래픽은 그림 형태로 표시될 수 있지만 페이지가 로드될 때마다 그림을 로드하는 데 시간이 걸립니다. 그렇다면 CSS를 사용하여 이러한 그래픽을 구현하는 방법은 무엇일까요? 이 장에서는 CSS를 사용하여 border 및 border-radius(코드 예제)를 사용하여 작은 그래픽을 그리는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우리 대부분은 border 속성에 4개의 매개변수가 있다는 것을 알고 있으므로 border-radius에도 4개의 매개변수가 있어야 합니다.

border 속성의 4가지 매개변수는 border-top, border-right, border-bottom, border-left.(시계 방향)

그러면 border-radius의 네 가지 매개 변수는 무엇인가요?

border-radius: 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래

아래에서는 border-radius를 사용하여 몇 가지 일반적인 그림을 그립니다.

1. 단순한 원

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            #div{

                width: 200px;

                height: 200px;

                background: red;

                border-radius: 50%;

            }

        </style>

    </head>

    <body>

        <div id="div">

             

        </div>

    </body>

</html>

로그인 후 복사

렌더링:

CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)

2. 타원형

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            #div{

                width: 100px;

                height: 200px;

                background: red;

                border-radius: 50%;

            }

        </style>

    </head>

    <body>

        <div id="div">

             

        </div>

    </body>

</html>

로그인 후 복사

렌더링:

CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)

3.

CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제) 4. 계란

레오나르도 다빈치가 계란을 그렸다고 들었는데 여기서는 CSS를 사용하여 계란을 그립니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            #div{

                position: relative;

                width: 200px;

                height: 180px;

                border: 1px solid black;

            }

            .left{

                position: absolute;

                top: 0;

                left: 100px;

                width: 100px;

                height: 170px;

                background: red;

                /*左下角为旋转基点*/

                transform-origin: 0 100%;

                transform: rotate(-45deg);

                border-radius: 50% 50% 0 0;

                /*让left的上左和上右变成圆形就可以*/

            }

            .right{

                position: absolute;

                top: 0;

                left: 0px;

                width: 100px;

                height: 170px;

                background: red;

                /*右下角为旋转基点*/

                transform-origin: 100% 100%;

                transform: rotate(45deg);

                border-radius: 50% 50% 0 0;

                /*让right的上左和上右变成圆形就可以*/

            }

        </style>

    </head>

    <body>

        <div id="div">

            <div class="left"></div>

            <div class="right"></div>

        </div>

    </body>

</html>

로그인 후 복사

Rendering:


CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제) 5. Dialog

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            #div{

                position: relative;

                width: 100px;

                height: 180px;

                background: red;

                border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;

                /*border-radius参数在/左右的区别,/左边是四个圆角的水平半径/右边是四个圆角垂直半径*/

            }

             

        </style>

    </head>

    <body>

        <div id="div">

        </div>

    </body>

</html>

로그인 후 복사

Rendering:


CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)6 .Yin Yang

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">      

            #div {

                width: 120px;

                height: 80px;

                background: red;

                position: relative;

                border-radius: 10px;

                margin-left: 50px;

                }

                #div:before {

                content:"";

                position: absolute;

                right: 100%;

                top: 26px;

                width: 0;

                height: 0;

                border-top: 13px solid transparent;

                border-right: 26px solid red;

                border-bottom: 13px solid transparent;

                }

        </style>

    </head>

    <body>

        <div id="div">

        </div>

    </body>

</html>

로그인 후 복사

렌더링:


7. 무한대 기호CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">      

            #baGua {

                width: 96px;

                height: 48px;

                background: #eee;

                border-color: red;

                border-style: solid;

                border-width: 2px 2px 50px 2px;

                border-radius: 100%;

                position: relative;

            }

            #baGua:before {

                content: "";

                position: absolute;

                top: 50%;

                left: 0;

                background: #eee;

                border: 18px solid red;

                border-radius: 50%;

                width: 12px;

                height: 12px;

            }

            #baGua:after {

                content: "";

                position: absolute;

                top: 50%;

                left: 50%;

                background: red;

                border: 18px solid #eee;

                border-radius:100%;

                width: 12px;

                height: 12px;

            }

        </style>

    </head>

    <body>

        <div id="baGua">

        </div>

    </body>

</html>

로그인 후 복사
렌더링:


위 내용은 CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿