CSS에서 선형을 사용하여 복잡한 테두리 효과를 만드는 분석 예
- 高洛峰원래의
- 2017-03-13 17:35:131938검색
이 글에서는 주로 CSS에서 선형을 사용하여 복잡한 테두리 효과를 만드는 관련 정보와 선형 그라데이션 속성 을 사용하여 멋진 테두리 효과를 만드는 방법에 대한 정보를 소개합니다.
I 온라인에서 봤습니다. 선형 그라데이션 속성을 사용하여 멋진 테두리 효과를 만드는 방법입니다. 먼저 코드가 컴퓨터에 미치는 영향을 확인할 수 있습니다.
<!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. :beforepseudo-class
위 코드에서 우리는 실제로 정의된 흰색 p에 하나를 정의한다는 것을 알 수 있습니다. 의사 클래스가 여기에 색상 사각형의 모든 스타일을 넣기 전에. :before 정의를 사용하면 위치 지정이 더 편리해지기 때문입니다. 상단과 왼쪽을 테두리 너비로 조정하면 됩니다. 동시에 둘은 하나가 된다.
2. 선형 그라데이션
이제 많은 브라우저가 이 CSS 방법을 지원합니다. 이 방법에는 다음과 같은 세 가지 사용 모드가 있습니다.:
① background:linear-gradient(top,#fff,#000)
이 코드의 의미는 위에서부터 흰색, 바닥까지 검정색을 찾으려면 배 밖으로 나가십시오.
② background:linear-gradient(top,right,#fff,#000)
이 코드는 위치에 대한 두 개의 매개변수인 top과 right를 전달합니다. 즉, 오른쪽 위에서 시작한다는 의미입니다. 좌측 하단의 변경사항, 기타 원칙은 첫 번째와 동일합니다.
3 background:linear-gradient(30deg,#fff,#000)
이 코드의 첫 번째 매개변수는 각도를 전달하는데요, 사실 원리와 위치는 동일하지만 표준 위치에서 나온 것은 아닙니다. 상황이 바뀌기 시작했습니다. 그렇다면 각도와 위치 사이의 대응 관계는 무엇입니까? 실험에 따르면 0도는 하단, 90도는 왼쪽, 180도는 상단, 360도는 오른쪽에 해당합니다.
위는 선형 방법을 사용하여 멋진 테두리를 구현하는 코드와 설명입니다. 로컬에서 구현하면 더 참신한 조합 구현 방법을 발견할 수 있습니다.
위 내용은 CSS에서 선형을 사용하여 복잡한 테두리 효과를 만드는 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!