CSS를 사용하여 간단한 확인 표시 효과 얻기

일반적으로 이를 구현하는 데는 두 가지 아이디어가 있습니다. 하나는 이미 만들어진 기호를 페이지에 삽입하는 것이고, 다른 하나는 CSS를 사용하여 구현하는 것입니다.

(동영상 공유 학습: css 동영상 튜토리얼)

이 글에서는 주로 두 번째 아이디어를 소개합니다.

• 블록 수준 요소의 너비와 높이 설정

• 요소의 인접한 두 테두리 설정

• 요소 회전

HTML

<div class="check-style-unequal-width"></div>

분석:

• 여기에서는 블록 수준 요소를 사용해야 합니다.

• 요소 콘텐츠를 설정할 필요가 없습니다

CSS

.check-style-unequal-width {
 
    width: 8px;
 
    height: 16px;
 
    border-color: #009933;
 
    border-style: solid;
 
    border-width: 0 3px 5px 0;
 
    transform: rotate(45deg);
 
}

분석:

• 너비와 높이를 설정하고 직사각형 효과를 얻으며 직사각형에 내용이 없습니다.

• 체크 표시의 일반적인 윤곽을 얻으려면 인접한 테두리의 스타일을 설정하세요.

• 회전 속성을 사용하여 성공적으로 가져오세요 the check mark

running effect

분석:

위 그림과 같이 첫 번째는 너비가 같은 두 줄의 체크표시 효과이고, 두 번째는 너비가 같은 두 줄의 체크표시 효과입니다. 너비가 같지 않음; 세 번째는 너비와 길이가 동일한 두 줄의 체크 표시 효과입니다. 체크 표시 효과입니다.

참고:

• 행 수준 요소의 너비와 높이를 직접 설정하는 것은 쓸모가 없습니다. 이를 블록 수준 요소로 만들려면 표시를 설정해야 합니다. 예를 들어, 이 예제에 적합하려면 스팬이 디스플레이를 인라인 블록으로 설정해야 합니다

• 실제 필요에 따라 요소 너비와 높이를 조정할 수 있습니다.

• 다른 테두리와 인접한 테두리의 너비를 설정할 수 있습니다 실제 필요에 따라

• 이 효과를 간단하게 수정하고 의사 요소 ::before 및 ::after에 적용할 수 있습니다. ::before & ::after

를 참조하세요. 관련 권장 사항: CSS 튜토리얼

위 내용은 CSS를 사용하여 간단한 확인 표시 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!