css3 の一部の非表示の詳細プロパティの WebKit 固有プロパティの使用法の詳細な説明

最新のブラウザはすでに多くの 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 属性を使用すると、中抜きのフォントを作成することもできます。

例

すべての 87a84f43f482aff8de0fa33983105e9b元素会共享他们的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 サイトの他の関連記事を参照してください。