CSS를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)-CSS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2018-09-21 17:45:42

원래의

4303명이 탐색했습니다.

페이지 개발 시 페이지를 아름답게 하기 위해 작은 그래픽이 필요한 경우가 많습니다. 이러한 그래픽은 그림 형태로 표시될 수 있지만 페이지가 로드될 때마다 그림을 로드하는 데 시간이 걸립니다. 그렇다면 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. 단순한 원

<!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. 타원형

<!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를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)

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

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

<!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

<!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

<!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를 사용하여 테두리 및 테두리 반경을 사용하여 작은 그래픽을 그리는 방법(코드 예제)

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!