CSS3의 선형 그래디언트를 사용하여 테두리를 만드는 샘플 코드 공유-CSS 튜토리얼-php.cn

CSS3의 선형 그래디언트를 사용하여 테두리를 만드는 샘플 코드 공유

高洛峰

풀어 주다： 2017-03-09 17:16:54

원래의

1835명이 탐색했습니다.

선형 그라데이션 선은 테두리를 만드는 데 매우 강력하며, 특히 획을 사용하여 복사된 테두리 효과를 만듭니다. 여기서는 CSS3 선형 그라데이션을 사용하여 테두리를 만드는 샘플 코드를 살펴보겠습니다.

일반적으로 앱의 테두리 윤곽선이 1픽셀 미만이므로 평소대로 1px 테두리를 직접 그렸습니다. 1px이었지만 결과는 앱의 획 '두꺼움'과는 전혀 달랐습니다. , 그래서 해결책이 있는지 온라인으로 검색했지만 한참을 검색해도 찾을 수 없었습니다. 혼자서.
그래서 이전 방법을 사용해서 선형 그래디언트(linear-gradient)를 생각했습니다

.line li{  border: none;   
  background-image: -webkit-linear-gradient(#222 50%,transparent 50%);   
  background-image: -moz-linear-gradient(#222 50%,transparent 50%);   
  background-image: -o-linear-gradient(#222 50%,transparent 50%);   
  background-image: linear-gradient(#222 50%,transparent 50%);   
  background-size:  100% 1px;   
  background-repeat: no-repeat;   
  background-position: bottombottom;}

로그인 후 복사

<ul class="line">
    <li>linear-gradient</li>
    <li>linear-gradient</li>
    <li>linear-gradient</li>
</ul>

로그인 후 복사

그래 또 나왔지만 아직 조금 결함이 있어서 문제 획을 변경하는 것입니다. 위치(왼쪽, 위쪽, 오른쪽, 아래쪽)는

매개변수를 수정해야 합니다. 예를 들어 왼쪽 획을 변경해야 합니다:

background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);   
background-size:  1px 100%;   
background-position: left;

로그인 후 복사

구체적인 내용은 일일이 나열하지 않습니다.

선형을 사용하여 복잡한 테두리 효과 만들기
그리고 인터넷에서 선형 그라데이션 속성을 사용하여 화려한 테두리 효과를 만드는 방법을 보았습니다. 먼저 코드가 제공됩니다.

<!DOCTYPE html>     

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">     
<head>     
    <meta charset="utf-8" />     
    <title></title>     
    <style>     
        .box {     
            margin: 80px 30px;     
            width: 200px;     
            height: 200px;     
            position: relative;     
            background: #fff;     
            float: left;     
        }     

            .box:before {     
                content: &#39;&#39;;     
                z-index: -1;     
                position: absolute;     
                width: 220px;     
                height: 220px;     
                top: -10px;     
                left: -10px;     
            }     

        .first:before {     
            background-image: linear-gradient(90deg, yellow, gold);     
        }     

        .second:before {     
            background-image: linear-gradient(0deg, orange, red);     
        }     

        .third:before {     
            background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);     
        }     
    </style>     
</head>     
<body>     
    <p class="box first"></p>     
    <p class="box second"></p>     
    <p class="box third"></p>     
</body>     
</html>

로그인 후 복사

코드에서 볼 수 있듯이 실제로는 그렇지 않습니다. 테두리를 사용하면 이 테두리 효과를 어떻게 얻을 수 있나요?
일반적인 아이디어는 먼저 흰색 p를 정의한 다음 흰색 사각형보다 큰 원인 유색 p를 정의하는 것입니다. 두 개를 겹치고 흰색 p가 컬러 p를 덮어 테두리 효과를 얻습니다.
여기에는 CSS 지식 포인트가 많이 사용됩니다.
1. :before pseudo-class
위 코드를 보면 실제로 정의된 흰색 p에 :before pseudo-class를 정의하고 여기에 색칠된 사각형의 모든 스타일을 넣었음을 알 수 있습니다. :before 정의를 사용하면 위치 지정이 더 편리해지기 때문입니다. 상단과 왼쪽을 테두리 너비로 조정하면 됩니다. 동시에 둘은 하나가 된다.
2. 선형 그라데이션
이제 많은 브라우저가 이 CSS 방법을 지원합니다. 이 메소드에는 다음과 같은 3가지 사용 모드가 있습니다.
① background:linear-gradient(top,#fff,#000)
이 코드의 의미는 상단의 흰색에서 하단의 검정색으로 전환된다는 것입니다.
② background:linear-gradient(top,right,#fff,#000)
이 코드는 위치, 상단 및 오른쪽에 대한 두 개의 매개변수를 전달합니다. 이는 오른쪽 상단에서 시작하여 왼쪽 하단으로 변경됨을 의미합니다. 이유는 첫 번째와 동일합니다.
3 background:linear-gradient(30deg,#fff,#000)
이 코드의 첫 번째 매개 변수는 각도를 전달합니다. 실제로 원리와 위치는 동일하지만 표준 위치에서 변경되지는 않습니다. . 그렇다면 각도와 위치 사이의 대응 관계는 무엇입니까? 실험에 따르면 0도는 아래쪽, 90도는 왼쪽, 180도는 위쪽, 360도는 오른쪽에 해당합니다.
위는 선형 방법을 사용하여 멋진 테두리를 구현하는 코드와 설명입니다. 로컬에서 구현하면 더 참신한 조합 구현 방법을 찾을 수 있습니다.

위 내용은 CSS3의 선형 그래디언트를 사용하여 테두리를 만드는 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!