Eine kurze Analyse der wenig bekannten Eigenschaften in CSS3: -webkit-tap-highlight-color

Das Attribut -webkit-tap-highlight-color in CSS ist einfach die Einstellung der Hintergrundfarbe, wenn auf dem Mobiltelefon geklickt wird. Der folgende Artikel stellt hauptsächlich dieses wenig bekannte Attribut in CSS3 vor: -webkit-tap -Highlight-color Informationen, Freunde in Not können sich darauf beziehen, schauen wir uns unten um.

-webkit-tap-highlight-color

Diese Eigenschaft ist nur auf iOS (iPhone und iPad) verfügbar. Wenn Sie auf einen durch Javascript definierten Link oder ein anklickbares Element klicken, wird dieser mit einem halbtransparenten grauen Hintergrund angezeigt. Um dieses Verhalten zurückzusetzen, können Sie -webkit-tap-highlight-color auf eine beliebige Farbe setzen.
Um diese Hervorhebung zu deaktivieren, setzen Sie den Alpha-Wert der Farbe auf 0.

Beispiel: Stellen Sie die Hervorhebungsfarbe auf 50 % transparentes Rot ein:

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

Browserunterstützung: nur iOS (iPhone und iPad).

Detaillierte Erklärung der Webkit-Textgrößenanpassung in CSS3

1 Wenn die Größe

2 verwenden. webkit-text-size – Das Anpassen des Textkörpers führt dazu, dass die Seitenskalierung fehlschlägt

3 Der Textkörper erbt den in HTML definierten Stil

4 -adjust, definiere es nicht als vererbbar oder global

outline: none

(1) Der Zweck der Definition dieses Stils für das a-Tag auf der PC-Seite ist um das Erscheinen abzubrechen, wenn Sie auf ein Tag in der gepunkteten Linie des IE-Browsers klicken. IE7- und niedrigere Browser erkennen dieses Attribut noch nicht. Sie müssen hidefocus="true"

(2)input, textarea{outline:none} zum a-Tag hinzufügen, um den Standardtextfeld-Fokusstil darunter aufzuheben chrome

(3) funktioniert nicht auf dem mobilen Endgerät. Wenn Sie den Standardstil des Textfelds entfernen möchten, können Sie -webkit-appearance verwenden -Tap-Highlight-Farbe.

Ich habe einige Dateien zum Zurücksetzen von Mobilgeräten gesehen, die dieses Attribut hinzugefügt haben, aber es ist eigentlich überflüssig.

Webkit-Erscheinungsbild

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

Hinweis: Verschiedene Eingabetypen verhalten sich nach Verwendung dieses Attributs unterschiedlich. Text und Schaltfläche haben keinen Stil, Radio und Kontrollkästchen verschwinden direkt

-webkit-user-select

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

-webkit-touch-callout

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

Weitere Analyse der wenig bekannten Eigenschaften in CSS3: -webkit -tap-highlight-color-bezogene Artikel beachten Sie bitte die chinesische PHP-Website!