Webkitカーネル用CSS記述方法 browser_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:49:28

オリジナル

1387 人が閲覧しました

-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