CSS notation for WebKit kernel browser

-webkit-tap-highlight-color:transparent; Set the color to transparent when clicking on the link highlight on mobile

-webkit-user-select:none; Set to cannot select text

-webkit-touch-callout:none; Long time does not trigger the system menu, can be used to add this property on the image to prevent the download of pictures

: Style for-webkit-full-screen canvas {} Full-screen mode (for Desktop)

Div p:matches (em, B, strong) {} uses Mathes to match multiple selectors

@media only screen and (max-width:480px) {} Specify mobile devices or small screen desktop screens

@media (-webkit-min-device-pixel-ratio:2), (min-resolution:300dpi) {Specifies a high-resolution screen device

Header {Background-image:url (header-highres.png);}

}

@media (-webkit-max-device-pixel-ratio:1.5), (max-resolution:299dpi) {Specifies a low-resolution screen device

Header {Background-image:url (header-lowres.png);}

}

Background-repeat:space; Background-repeat:round; The background properties of these two kinds of CSS3 are worth studying.

Width:calc (100%-40px); Calculate width

Text-decoration: #FF8800 wavy Ine-through; Wavy link

text-rendering:optimizelegibility; Using this property will tighten the distance between the characters.

Font-variant-ligatures:common-ligatures; Set CSS ligatures

Transform:rotate (90); Rotate 90 degrees

Transform-origin:center Center; Transform-origin can change the position of the transformation

-webkit-appearance:none; -webkit-appearance can change buttons or other controls that look like local controls

Style the hint when you beautify the form check

::-webkit-validation-bubble {}

::-webkit-validation-bubble-message {}

::-webkit-validation-bubble-arrow {}

::-webkit-validation-bubble-arrow-clipper {} When the hint appears similar to the following structure

<div-webkit-validation-bubble>

<div-webkit-validation-bubble-arrow></div>

<div-webkit-validation-bubble-arrow-clipper></div>

<div-webkit-validation-bubble-message>error message</div>

</div> Customize WebKit Browser scroll bar, see Google Reader and other Chrome/safari under the effect, below is an example, the style code of this scroll bar is as follows:

Customized WebKit Scrollbar/* Let´s get this party started */

::-webkit-scrollbar {

width:12px;

}

/* Track */

::-webkit-scrollbar-track {

-webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,0.3);

-webkit-border-radius:10px;

border-radius:10px;

}

/* Handle */

::-webkit-scrollbar-thumb {

-webkit-border-radius:10px;

border-radius:10px;

Background:rgba (255,0,0,0.8);

-webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

Background:rgba (255,0,0,0.4);

}-webkit-background-composite:plus-darker; -webkit-background-composite a combined style used to set the background or color of an element

-webkit-text-stroke:1px Rgba (0,0,0,0.5); -webkit-text-stroke can be used to add strokes to text

-webkit-mask-image:url (/path/to/mask.png); Define a picture to mask the element

-webkit-box-reflect:below 5px; Defines the reflection of an element

: local-link {font-weight:normal;} Local-link can define link styles for relative addresses

CSS notation for WebKit kernel browser