Webkitカーネル用CSS記述方法 browser_html/css_WEB-ITnose

-webkit-tap-highlight-color: 透明; モバイルでハイライトするリンクをクリックしたときに色を透明に設定します

-webkit-user-select: none; テキストを選択できないように設定します

-webkit-touch-callout : none; 長押し時にシステム メニューをトリガーしません。この属性を画像に追加して、全画面モードでの画像のダウンロードを禁止できます

:-webkit-full-screen Canvas {} スタイル ( for Desktop)

div p :matches(em , b, Strong) {} 数学を使用して複数のセレクターを照合します

@media のみの画面と (最大幅: 480px) {} モバイル デバイスまたは小さな画面のデスクトップ画面を指定します

@media (-webkit-min-device -pixel-ratio: 2), (min-resolution: 300dpi) { 高解像度の画面デバイスを指定

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

;

}

@media (-webkit -max-device-pixel-ratio: 1.5),(max-resolution: 299dpi) { 低解像度の画面デバイスを指定します

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

}

background -repeat: space;background-repeat:round; これらの 2 つの CSS3 背景プロパティは勉強する価値があります

width: calc(100%-40px); FF8800 wavy ine-through;

text-rendering: optimizeLegibility; この属性を使用すると、文字間の距離が狭まります

font-variant-ligatures: common-ligatures を設定します

transform: Rotate 90 度

transform -origin: center center;transform-origin は、変換の位置を変更できます

-webkit-Appearance: none; -webkit-Appearance は、ボタンまたは他のコントロールをローカル コントロールのように変更できます

フォーム検証時のプロンプト スタイル

::-webkit-validation-bubble {}

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

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

::- webkit-validation-bubble-arrow-clipper {} プロンプトが以下の構造のように表示される場合

エラー メッセージ

カスタマイズWebKit ブラウザ バーのスクロール。Chrome/Safari での Google Reader の効果を参照してください。以下は例です。このスクロール バーのスタイル コードは次のとおりです:

Customized WebKit Scrollbar /* パーティーを始めましょう */

::-webkit-スクロールバー {

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;

}

/* ハンドル */

::-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 は、要素の背景または色の組み合わせスタイルを設定するために使用されます

-webkit-text-ストローク: 1px rgba(0,0,0,0.5);ストロークはテキスト Edge にストロークを追加するために使用できます

-webkit-mask-image: url(/path/to/mask.png); 要素をマスクする画像を定義します

-webkit-box-reflect: 5px;要素のリフレクションを定義します

:local-link {font-weight:normal;} local-link は相対アドレスのリンク スタイルを定義できます

この記事は http://www.kqiqi.com/ からのものです。ナレッジ/プログラム/997.html

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。