장바구니 주소 선택 봉투 효과를 달성하기 위해 CSS3 선형 그라데이션을 사용하는 예

CSS3 그래디언트 프런트엔드 아동화를 아실 텐데요, 일부 전자상거래 웹사이트에서는 주소 선택을 아름답게 하기 위해 봉투 스타일로 만듭니다(개인적으로는 매우 잔인하다고 생각합니다~). . 구현을 살펴본 결과 대부분은 그림 형식을 기반으로 하며 최적화 사고방식으로 CSS3 선형 그라데이션을 사용하여 봉투 효과를 구현하려고 합니다

시작해보겠습니다~

html 구조는 다음과 같습니다.

                                                                                   >                           :                                                    높이 :
                                           ~                                                        다음으로 편지함의 그라데이션을 작성합니다. 먼저 그림 위의 그라데이션을 분석해 보겠습니다. 실제로는 흰색, 빨간색, 파란색의 세 가지 색상이 있습니다. 선형 그라디언트를 사용할 때 처음에 그라디언트의 각도를 정의하는 것 외에도 색상과 색상 비율도 정의해야 한다는 것을 모두 알고 있으므로 이제 방법에 대해 이야기하겠습니다. 이 비율을 결정하십시오.

렌더링을 관찰하면
사이클

으로 빨간색, 흰색, 파란색, 흰색의 패턴을 찾을 수 있으며, 패턴 번호는 4이고 비율은 100입니다. %/ (당사의 정규 수치 * 2) = 12.5%가 당사의 비율입니다. 왜 우리가 정규 번호 *를 사용하는지 설명하십시오. 2. 정규 번호는 조합이어야 하는 것 아닌가요? NO! 큐브 안에 숫자 조합의 색상을 넣습니다. 모두의 이해를 돕기 위해 렌더링을 했습니다.

이것은 매우 직관적이어야 합니다. 작은 큐브 단위로 반복하세요
.letter-box{ width: 278px;
height: 176px;
padding: 5px;
box-sizing : border-box;
배경: 선형 그라데이션(45도,#f25953 12.5%,#fbfaf5 12.5%,#fbfaf5 25%,#5590d6 25%,#5590d6 37.5%,#fbfaf5 37.5%,#fbfaf5 50%, #f25953 50% , #f25953 62.5%, #fbfaf5 62.5%, #fbfaf5 75%, #5590d6 75%, #5590d6 87.5%, #fbfaf5 87.5%, #fbfaf5 100%); 지상 크기
: 70px 70px;
}

위 내용은 장바구니 주소 선택 봉투 효과를 달성하기 위해 CSS3 선형 그라데이션을 사용하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!