>  기사  >  웹 프론트엔드  >  CSS3의 잘 알려지지 않은 속성에 대한 간략한 분석: -webkit-tap-highlight-color

CSS3의 잘 알려지지 않은 속성에 대한 간략한 분석: -webkit-tap-highlight-color

高洛峰
高洛峰원래의
2017-02-11 13:45:283196검색

CSS의 -webkit-tap-highlight-color 속성은 단순히 휴대폰에서 클릭했을 때의 배경색 설정입니다. 다음 글에서는 CSS3의 잘 알려지지 않은 이 속성을 주로 소개합니다. -webkit-tap -Highlight-color 관련 정보, 도움이 필요한 친구들이 참고할 수 있도록 아래 내용을 살펴보겠습니다.

-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. 시트 12px에서는 중국어 버전의 Chrome 브라우저에서 글꼴 표시가 여전히 12px입니다. 이때 html{-webkit-text-size-adjust:none;}

2, -webkit-을 사용할 수 있습니다. text-size-adjust 본문을 사용하면 페이지 확대/축소가 실패합니다

3. 본문은 html에 정의된 스타일을 상속합니다

4. -webkit-text-size-adjust 및 상속 가능 또는 전역으로 정의하지 마십시오

outline: none

(1) PC에서 a 태그에 대해 이 스타일을 정의하는 목적은 점선을 취소하는 것입니다. IE 브라우저에서 a 태그를 클릭하면 나타나는 줄입니다. IE7 이하 브라우저는 아직 이 속성을 인식하지 못합니다. 아래의 기본 텍스트 상자 포커스 스타일을 취소하려면 a 태그에 hidefocus="true"

(2)input, textarea{outline:none}을 추가해야 합니다. chrome

(3) 텍스트 상자의 기본 스타일을 제거하려면 -webkit-appearance를 사용하면 -webkit을 사용할 수 있습니다. -탭 강조 색상.

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

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标签都要加

CSS3의 잘 알려지지 않은 속성에 대한 추가 분석: -webkit-tap-highlight -color 관련 글은 PHP 중국어 홈페이지를 참고해주세요!

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