CSS3의 webkit-tap-highlight-color 속성을 사용하는 방법

이번에는 CSS3의 webkit-tap-highlight-color 속성을 사용하는 방법과 CSS3의 webkit-tap-highlight-color를 사용할 때 notes가 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

-webkit-tap-highlight-color

이 속성은 iOS(iPhone 및 iPad)에서만 사용할 수 있습니다. Javascript를 통해 정의된 링크나 클릭 가능한 요소를 클릭하면 반투명 회색 배경으로 표시됩니다. 이 동작을 재설정하려면 -webkit-tap-highlight-color를 원하는 색상으로 설정하면 됩니다.
이 강조 표시를 비활성화하려면 색상의 알파 값을 0으로 설정하세요.

예: 하이라이트 색상을 50% 투명 빨간색으로 설정:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

브라우저 지원: iOS(iPhone 및 iPad)만.

css3의 webkit-text-size-adjust에 대한 자세한 설명

1. 글꼴 크기

2, -webkit-을 사용할 수 있습니다. text 본문에 -size-adjust를 배치하면 페이지 크기 조정이 실패합니다

3. 본문은 html

4에 정의된 스타일을 상속합니다. -webkit-text-size-adjust를 사용할 때 상속 가능 또는 것으로 정의하지 마세요. global

outline: none

(1) PC에서 a 태그에 대해 이 스타일을 정의하는 목적은

ie 브라우저에서 a 태그를 클릭할 때 나타나는 점선을 없애기 위한 것입니다. ie7 이하 브라우저는 아직 이 속성을 인식하지 못합니다. chrome

에서 기본 텍스트 상자 포커스 스타일을 취소하려면 a 태그에 hidefocus="true"

(2)input, textarea{outline:none}을 추가해야 합니다. 3) 모바일 버전에서는 작동하지 않습니다. 텍스트 상자의 기본 스타일을 제거하려면 -webkit-

appearance를 사용하면 초점을 맞출 때 기본 스타일을 취소할 수 있습니다. -색상.

이 속성을 추가하는 일부 모바일 재설정 파일을 보았는데 실제로는 중복되었습니다.

webkit-appearance

-webkit-appearance: none;   //消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。

참고: 이 속성을 사용한 후에는 다양한 입력 유형이 다르게 동작합니다. 텍스트와 버튼에는 스타일이 없으며 라디오와 체크박스는 바로 사라집니다

-webkit-user-select

-webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

-webkit-touch-callout

-webkit-touch-callout:none;  // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

에서 사례를 읽으신 후 방법을 마스터하신 것 같습니다. 이 기사, 더보기 PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 자료:

html+css의 네 가지 숨기기 방법
CSS와 HTML 간의 일반적인 사용 오해

CSS 스타일에서 테두리 이미지 사용에 대한 자세한 설명

위 내용은 CSS3의 webkit-tap-highlight-color 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!