>웹 프론트엔드 >CSS 튜토리얼 >CSS 그라데이션:선형 그라데이션()

CSS 그라데이션:선형 그라데이션()

Linda Hamilton
Linda Hamilton원래의
2024-12-27 16:18:10527검색

Css gradients:linear-gradient()

linear-gtradient() CSS 함수는 선형 그래디언트를 배경으로 생성합니다
구문은 다음과 같습니다.
CSS 선택기{
배경 이미지:선형 그라데이션(각도, 색상1, 색상2, 색상3,......);
}

angle :선택 사항은 그라데이션 방향을 나타냅니다.
기본적으로 180도입니다
deg 대신 방향을 결정하는 키워드로 다음을 사용할 수 있습니다.
*오른쪽으로 :90도
**왼쪽: 270deg
*
위쪽: 0deg와 같음
**아래쪽: 180도와 같습니다(linear-radient()의 각도가 아래쪽이므로 선택 사항입니다
**color1 : 필수입니다. 이 값은 색상 값과
로 구성됩니다. 선택 가능한 색상 중지 위치 1~2개(0%에서 100% 사이의 백분율 또는 그라데이션 축을 따른 길이).



그라데이션 {

높이: 200px;
/* 45도 기울어진 그래디언트,
파란색으로 시작해 빨간색으로 마무리 /
/

/*
배경 이미지:선형 그라데이션(45도, 파란색, 빨간색);
*/

/* 오른쪽 하단에서 왼쪽 상단으로 이어지는 그라데이션
파란색으로 시작해 빨간색으로 마무리 /
/

/*
배경 이미지:선형 그라데이션(왼쪽 상단, 파란색, 빨간색)
*/

배경 이미지:선형 그라데이션(오른쪽으로, 빨간색, 50%, 파란색)

/*
다중 위치 색상 정지점: 45도 기울어진 그라데이션
빨간색 하단 왼쪽 절반과 파란색 상단 오른쪽 절반이 있습니다.
그라데이션이 빨간색에서 파란색으로 바뀌는 단단한 선으로
*/

/*
배경 이미지 :선형 그라데이션(
45도,
빨간색 0 50%,

파란색 50% 100%);

*/

위 내용은 CSS 그라데이션:선형 그라데이션()의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.