CSS3에서 선형 그라데이션 속성을 사용하는 방법 요약

이 글은 CSS3에서 선형 그라데이션 속성을 사용하는 방법에 대한 요약을 제공합니다. 이는 특정 참조 값이 있으므로 도움이 될 수 있습니다.

linear-gradient는 CSS3에서 중요한 속성입니다. 언뜻 보면 매우 간단해 보이지만, 단순해 보이지는 않습니다. 복잡한 그래픽을 많이 구현할 수 있습니다.

코드는 비교적 간단합니다.

linear-gradient(65deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent),
linear-gradient(115deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent)

#🎜🎜 #하지만 이해하려면 여전히 일정한 기초가 필요합니다.

linear 그래디언트 하단)

background-image: linear-gradient(red, yellow, blue, green); 
background-image: linear-gradient(rgba(255, 0, 0, .2), yellow, blue, green);

색상 그라데이션 방향 제어(deg)

/*
    控制颜色渐变的方向
    to right -- 从左向右
    to top -- 从下到上
    to left -- 从右到左
    to bottom --- 从上到下（默认值）
*/
background-image: linear-gradient(to right, red, yellow, blue, green);
background-image: linear-gradient(to top, red, yellow, blue, green);
background-image: linear-gradient(to left, red, yellow, blue, green);
background-image: linear-gradient(to bottom, red, yellow, blue, green);

색상 그라데이션 방향 제어(deg)

/*0deg = to top -- 从下到上*/
background-image: linear-gradient(0deg, red, yellow, blue, green);
/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*基于0度逆时针旋转45deg*/
background-image: linear-gradient(-45deg, red, yellow, blue, green);

반복 선형 그라데이션: 반복-선형 -gradient

/*设置过渡颜色的起始位置*/
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
background-image: linear-gradient(to right, red 50px, yellow, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);

관련 권장 사항:

CSS3에서 선형 그라데이션 선형 그라데이션을 사용하는 방법

#🎜🎜 #

CSS3 선형 그래디언트를 사용하여 테두리를 만들기 위한 샘플 코드 공유 Linear-gradient

위 내용은 CSS3에서 선형 그라데이션 속성을 사용하는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!