css3 の一部の非表示の詳細プロパティの WebKit 固有プロパティの使用法の詳細な説明-CSSチュートリアル-php.cn

最新のブラウザはすでに多くの CSS3 プロパティをサポートしていますが、ほとんどのデザイナーや開発者は依然として、border-radius、box-shadow、transform などのいくつかの非常に「主流」のプロパティに焦点を当てているようです。これらは十分に文書化され、十分にテストされており、最も頻繁に使用されているため、最近 Web サイトを設計している場合、それらなしでは生きていくのは困難です。

しかし、ブラウザーの膨大な宝の山の中に、あまり注目されていない、著しく過小評価されている高度なプロパティがいくつか隠されています。おそらくそれらの一部はこのようにする必要があります (無視する) が、他の属性はもっと認識されるべきです。 Webkit には最大の宝が隠されており、iPhone、iPad、Android アプリの時代においては、Webkit を理解し始めることが役に立ちます。 Firefox などで使用されている Gecko エンジンでも、いくつかの独自のプロパティが提供されています。この記事では、あまり知られていない CSS 2.1 および CSS3 プロパティと、最新のブラウザーでのそれらのサポートについて説明します。

説明: 各属性について、ここで次のように規定します。「WebKit」は Webkit カーネルを使用するブラウザ (Safari、Chrome、iPhone、iPad、Android など) を指し、「Gecko」は Gecko カーネルを使用するブラウザを指します ( Firefox など）。さらに、公式 CSS 2.1 仕様の一部であるプロパティもあります。つまり、より多くのブラウザ、さらには一部の古いブラウザでもサポートされることになります。最後に、CSS3 タグは、標準に準拠し、Firefox 4、Chrome 10、Safari 5、Opera 11.10、IE9 などの最新のブラウザバージョンでサポートされるプロパティを識別します。

-webkit-mask

この属性は非常に強力であるため、詳細な紹介はこの記事の範囲を超えています。実際のアプリケーションで大幅に時間を節約できるため、詳しく学ぶ価値があります。

-webkit-mask を使用すると、要素にマスクを追加できるため、任意の形状のパターンを作成できます。マスクには、CSS3 グラデーションまたは半透明の PNG 画像を使用できます。マスク要素のアルファ値が 0 の場合、下にある要素が覆われ、1 の場合、下にあるコンテンツが完全に表示されます。関連プロパティには、-webkit-mask-clip、-webkit-mask-position、-webkit-mask-repeat などがあり、バックグラウンドの構文に大きく依存します。詳細については、Webkit ブログと以下のリンクをご覧ください。

例

画像マスク:

.element{
background: url(img/image.jpg) repeat;
-webkit-mask: 
url(img/mask.png);
}

ログイン後にコピー

例

グラデーションマスク:

.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

ログイン後にコピー

-webkit-text-ストローク

CSS ボーダーの欠点の 1 つは、長方形要素しか使用できないことです。 -webkit-text-stroking はテキストに境界線を追加できます。テキスト境界線の幅を設定するだけでなく、その色も設定できます。さらに、 color:transparent 属性を使用すると、中抜きのフォントを作成することもできます。

例

すべての

タイトルに幅 2 ピクセルの青い境界線を設定します:

h1 {-webkit-text-stroke: 2px blue}

ログイン後にコピー

もう 1 つの機能は、1 ピクセルの透明な境界線を設定することでテキストを滑らかにすることができます:

 h2 {-webkit-text-stroke: 1px transparent}

ログイン後にコピー

赤い中空フォントを作成します:

h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}

ログイン後にコピー

-webkit-nbsp-mode

改行は時々難しいものです。適切な場所でテキストを（折り返すのではなく）改行したい場合もあれば、そうでない場合もあります。これを制御するプロパティの 1 つは -webkit-nbsp-mode です。これを使用すると、空白の動作を変更して、空白が使用されている場所でテキストを強制的に改行できます。これは、値をスペースに設定することで実現できます。

-webkit-tap-highlight-color

このプロパティは iOS (iPhone および iPad) でのみ使用できます。 Javascript で定義されたリンクまたはクリック可能な要素をクリックすると、半透明の灰色の背景で表示されます。この動作をリセットするには、-webkit-tap-highlight-color を任意の色に設定します。

この強調表示を無効にするには、色のアルファ値を 0 に設定します。

例

ハイライトカラーを透明度50%の赤に設定します:

   -webkit-tap-highlight-color: rgba(255,0,0,0.5);

ログイン後にコピー

ブラウザサポート: iOSのみ(iPhoneおよびiPad)。

詳しい内容: Safari開発者ライブラリ

zoom:リセット

一般的に言えば、zoomはIE 固有のプロパティ。しかし、Webkit もこれをサポートし始めており、値のリセットを使用すると、Webkit は良好な結果を達成できます (興味深いことに、IE はこの値をサポートしていません)。これにより、ブラウザーでの通常のズーム動作をリセットできます。要素がzoom:resetと宣言されている場合、ユーザーがページをズームインすると、ページ上の他の要素もズームインします。

注: 実際、Chrome の強制フォントサイズを無効にする場合は -webkit-text-size-adjust:none; を使用することがよくありますが、これでも同様の効果が得られます。違いは、この属性を設定する要素内のテキストです。拡大/縮小はされませんが、ページ上の他の要素は変更されます - Shenfei

-webkit-margin-collapse

这个属性属于限制级的，但是它还是非常值得关注。通常，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。

最常见的例子就是两个相邻的

元素会共享他们的margin值。想要控制这个表现，我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则停止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。

-webkit-box-reflect

你还记得几乎每个网站都把他们的网站logo或者头部的文字做成倒影的那个年代吗？谢天谢地，那个年代已经过去了，但是如果你要在一些按钮、导航、或者其他UI元素上更好的使用这个技术，-webkit-box-reflect是更好的选择。

这个属性接受above、below、left和right四个关键词，它们设置倒影的方向，它们和一个设置元素和它的倒影建的距离的数字一起使用。同时，蒙板图片也是同样支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性。

示例

这个倒影会出现在它的父元素的下面并有5px的间距:

  -webkit-box-reflect: below 5px;

ログイン後にコピー

这个倒影会投射到元素的右边，没有间距。然后，一个蒙板将会被应用(url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

ログイン後にコピー

-webkit-marquee

另一个属性让我们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全显示。

ozPDA创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字，可以尝试换一个城市来体验。需要使用WebKit内核浏览器)

示例

.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}

ログイン後にコピー

要让marquee工作需要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。

剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化。

以上がcss3 の一部の非表示の詳細プロパティの WebKit 固有プロパティの使用法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。