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

이번에는 CSS3의 선형 그라데이션 사용 방법을 알려드리겠습니다. CSS3의 선형 그라데이션 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다. 쇼핑몰 프로젝트에서 장바구니는 매우 중요한 기능입니다. 가장 일반적인 것은 스냅 구매를 포함하여 장바구니의 재고에 대한 "+-" 작업으로, 그 뒤에는 많은 알고리즘이 있습니다. 하지만 프런트 엔드로서 장바구니 결제 시 +-는 단지 계산일 뿐입니다. 전통적인 구현 방법은 그림을 통해 +- 버튼을 구현하는 것이지만, 이 글에서는 CSS3의 선형-그라디언트 선형 그래디언트를 사용하여 장바구니의 덧셈과 뺄셈 연산을 구현해 보겠습니다.

빼기 기호 효과를 구현하는 것은 매우 간단합니다. 예를 들어 10px*2px 빼기 기호 그래픽을 구현하려는 경우 CSS는 다음과 같습니다.

.minus {
    background-image: linear-gradient(to top, #666, #666);
    background-size: 10px 2px;
}

먼저 그라데이션을 사용하여 단색( #666) 전체 요소 배경을 덮는 그래디언트 이미지를 만든 다음 background-size 속성을 사용하여 원하는 크기로 조정하면 효과가 나타납니다.

더하기 기호의 효과는 선형 그라데이션 누적의 추가 레이어가 필요하다는 점을 제외하면 비슷합니다.

마지막으로 아래 그림과 유사한 효과를 얻을 수 있습니다.

전통적인 ::before와 비교하여

배경색

또는 테두리가 있는 ::afetr 의사 요소에서는 그라데이션 배경 생성을 사용하는 것이 매우 중요합니다. 이점은 중심 위치 지정이 매우 편리하다는 것입니다. 배경 속성 바로 뒤에 중심을 추가하기만 하면 됩니다. 그러나 기존 구현에서는 일반적으로 절대 위치 지정이 필요하며 이를 중심으로 하는 데 많은 코드가 필요하므로 매우 장황합니다. 이 예제의 전체 코드는 다음과 같습니다. CSS 코드는 다음과 같습니다.

.btn {
    display: inline-block;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px; height: 24px;   
    border-radius: 2px;
    box-shadow: 0 1px rgba(100,100,100,.1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}

핵심 html 코드는 다음과 같습니다.

<a></a>
<input>
<a></a>

최종 작동 효과는 위 텍스처와 동일합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

호버 선택기 사용 방법

CSS의 마스크 이미지 속성에 대한 자세한 설명

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