CSS의 선형 그라데이션() 함수는 무엇을 합니까? 선형 그라데이션으로 원형 테두리 구현(코드)
- 青灯夜游원래의
- 2018-09-20 11:32:574011검색
프론트엔드 개발 과정에서 다양한 효과를 얻기 위해 선형 그라데이션을 사용하는 경우가 있습니다. CSS의 선형 그라데이션() 함수는 무엇을 하나요? 선형 그래디언트 원형 테두리(코드) 을 구현합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. CSS 선형그라디언트()란 무엇인가요?
1. 정의
css 선형 그라데이션 함수는 선형 그라데이션 "이미지"를 만드는 데 사용됩니다.
2. 사용법
선형 그래디언트를 생성하려면 그래디언트 효과의 시작점과 방향(각도로 지정)을 설정해야 합니다. 끝 색상도 정의해야 합니다. 중지 색상은 Gecko가 만들기를 원하는 부드러운 전환이며, 더 복잡한 그라데이션 효과를 만들기 위해 더 많은 색상을 지정할 수 있지만 적어도 두 개를 지정해야 합니다.
예(종료 색상 3개 지정):
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */ background: linear-gradient(red,yellow,blue); /* 标准语法 */
렌더링:
%20%ED%95%A8%EC%88%98%EB%8A%94%20%EB%AC%B4%EC%97%87%EC%9D%84%20%ED%95%A9%EB%8B%88%EA%B9%8C?%20%EC%84%A0%ED%98%95%20%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98%EC%9C%BC%EB%A1%9C%20%EC%9B%90%ED%98%95%20%ED%85%8C%EB%91%90%EB%A6%AC%20%EA%B5%AC%ED%98%84(%EC%BD%94%EB%93%9C) "153741154572526CSS의 선형 그라데이션() 함수는 무엇을 합니까? 선형 그라데이션으로 원형 테두리 구현(코드)")
예가 있습니다 선형 그라데이션을 얻기 위한 방향이 지정되지 않았으므로 기본값은 위에서 아래로 효과를 얻는 것입니다. 효과를 얻기 위해 방향(각도)을 지정할 수도 있습니다. 예:
방향 지정( 왼쪽에서 왼쪽으로) 오른쪽):
background: -webkit-linear-gradient(right,red,yellow,blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(right,red,yellow,blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right,red,yellow,blue); /* Firefox 3.6 to 15 */ background: linear-gradient(to right,red,yellow,blue);/* 标准语法 */
%20%ED%95%A8%EC%88%98%EB%8A%94%20%EB%AC%B4%EC%97%87%EC%9D%84%20%ED%95%A9%EB%8B%88%EA%B9%8C?%20%EC%84%A0%ED%98%95%20%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98%EC%9C%BC%EB%A1%9C%20%EC%9B%90%ED%98%95%20%ED%85%8C%EB%91%90%EB%A6%AC%20%EA%B5%AC%ED%98%84(%EC%BD%94%EB%93%9C) "153741189372411CSS의 선형 그라데이션() 함수는 무엇을 합니까? 선형 그라데이션으로 원형 테두리 구현(코드)")
방향 지정(45도 각도):
background: linear-gradient(45deg,red,yellow,blue); /* 标准语法 */
#🎜🎜 #
background: -webkit-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); /*Standard*/
%20%ED%95%A8%EC%88%98%EB%8A%94%20%EB%AC%B4%EC%97%87%EC%9D%84%20%ED%95%A9%EB%8B%88%EA%B9%8C?%20%EC%84%A0%ED%98%95%20%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98%EC%9C%BC%EB%A1%9C%20%EC%9B%90%ED%98%95%20%ED%85%8C%EB%91%90%EB%A6%AC%20%EA%B5%AC%ED%98%84(%EC%BD%94%EB%93%9C) "153741279368080CSS의 선형 그라데이션() 함수는 무엇을 합니까? 선형 그라데이션으로 원형 테두리 구현(코드)")
#🎜 🎜##🎜🎜 #
테두리 둥근 모서리 속성: border-radius를 사용하여 테두리의 둥근 각도를 100%로 설정
%20%ED%95%A8%EC%88%98%EB%8A%94%20%EB%AC%B4%EC%97%87%EC%9D%84%20%ED%95%A9%EB%8B%88%EA%B9%8C?%20%EC%84%A0%ED%98%95%20%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98%EC%9C%BC%EB%A1%9C%20%EC%9B%90%ED%98%95%20%ED%85%8C%EB%91%90%EB%A6%AC%20%EA%B5%AC%ED%98%84(%EC%BD%94%EB%93%9C) "153741332837256CSS의 선형 그라데이션() 함수는 무엇을 합니까? 선형 그라데이션으로 원형 테두리 구현(코드)")
#🎜🎜 #
선형 그래디언트()를 사용할 때 바깥쪽 원의 그래디언트 색상을 추가하여 다음과 같이 만듭니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框渐变的圆形</title>
<style>
.border1{
width: 200px;
height: 200px;
margin:100px auto;
position: relative;
border: 1px solid transparent;
border-radius: 100%;
background: white;
background-clip: padding-box;
padding: 10px;
}
.border1::after{
position: absolute;
top: -40px;
bottom: -40px;
left: -40px;
right: -40px;
background: linear-gradient(45deg,red, blue);
content: '';
z-index: -1;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="border1"></div>
</body>
</html>%20%ED%95%A8%EC%88%98%EB%8A%94%20%EB%AC%B4%EC%97%87%EC%9D%84%20%ED%95%A9%EB%8B%88%EA%B9%8C?%20%EC%84%A0%ED%98%95%20%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98%EC%9C%BC%EB%A1%9C%20%EC%9B%90%ED%98%95%20%ED%85%8C%EB%91%90%EB%A6%AC%20%EA%B5%AC%ED%98%84(%EC%BD%94%EB%93%9C) "153741363491248CSS의 선형 그라데이션() 함수는 무엇을 합니까? 선형 그라데이션으로 원형 테두리 구현(코드)")
예제는 매우 간단합니다. 연습하거나 다음과 같이 수정할 수 있습니다. 반원...위 내용은 CSS의 선형 그라데이션() 함수는 무엇을 합니까? 선형 그라데이션으로 원형 테두리 구현(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.