CSS3의 선형 그래디언트를 사용하여 테두리를 만드는 샘플 코드 공유
- 高洛峰원래의
- 2017-03-09 17:16:541764검색
선형 그라데이션 선은 테두리를 만드는 데 매우 강력하며, 특히 획을 사용하여 복사된 테두리 효과를 만듭니다. 여기서는 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: '';
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!