CSS writing method for webkit kernel browser_html/css_WEB-ITnose

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

-webkit-user-select: none; Set to impossible Select text

-webkit-touch-callout: none; The system menu will not be triggered when long-pressed. You can add this attribute to the image to prohibit downloading the image

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

div p :matches(em, b, strong) {} Use mathes to match multiple selectors

@media only screen and (max -width: 480px) {} Specify Mobile device or small desktop screen

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 300dpi) { Specify high resolution Screen device

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

}

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

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

}

background-repeat: space; background-repeat: round; These two CSS3 background properties are worth studying

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

text- decoration: #FF8800 wavy ine-through; wavy link

text-rendering: optimizeLegibility; using this attribute will tighten the distance between 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 to look like local controls

Beautify the prompt style during form verification

::-webkit-validation-bubble { }

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

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

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

Error Message< ;/div>

Customize the scroll bar of the webkit browser, see the effect of Google Reader, etc. under Chrome/Safari. The following 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 is used to set the background or color combination style of an element

-webkit-text-stroke: 1px rgba(0,0,0,0.5); -webkit-text-stroke can Used to add strokes to text

-webkit-mask-image: url(/path/to/mask.png); Define an image to mask elements

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

:local-link {font-weight: normal;} local-link can define the link style of relative address

This article is from: http://www.kqiqi.com/knowledge/program/997.html