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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn