Webkit のテキストと背景の効果_html/css_WEB-ITnose

-webkit-background-clip:padding-box | border-box | content-box text、オブジェクトの背景画像を外側にクリップする領域を指定します。対応するスクリプト機能は、backgroundClip

padding-box	パディング領域（パディングを除く）から外側に向かって背景をクリップします。
border-box	境界線領域（境界線を除く）から背景をトリミングします。
content-box	コンテンツ領域から外側に向かって背景をトリミングします。
text	前景コンテンツ (テキストなど) の形状から外側を切り抜き領域として切り抜き、背景を塗りつぶし色などのマスクとして使用したり、テキストの効果を実現したりできます。勾配。

例:

div{ font-size:40px; width:500px; margin:30px auto; text-align:center; border:5px solid #999; padding:10px;}.bgTest{background:-webkit-linear-gradient(top,#F00,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

<div class="bgTest">背景测试 Background Test</div>

結果: Text

padding-box と border-box (なぜ両者に違いがないのかわかりません) two)

content-box

-webkit-background-origin:padding-box border-box

オブジェクトの背景画像の基準原点 (位置) を設定または取得します。背景位置を計算しています。対応するスクリプト機能は、backgroundOrigin

padding-box border-box content-box

パディング領域（パディングを含む）から背景画像を表示します。

ボーダー領域（ボーダーを含む）から背景画像を表示します。

コンテンツエリアから背景画像を表示します。

例: http://ued.ctrip.com/blog/wp-content/webkitcss/demo/background-origin.html

background-position: 背景画像の開始位置を設定します、詳細 http:/ / www.w3school.com.cn/cssref/pr_background-position.asp

-webkit-background-size: オブジェクトの背景画像のサイズを設定します。この属性は 2 つのパラメータ値を提供します (特性値の cover と contains を除く)。 2 つ指定した場合、1 つ目は背景画像の幅を定義するために使用され、2 つ目は背景画像の高さを定義するために使用されます。 1 つだけ指定した場合、この値は背景画像の幅を定義するために使用されます。2 番目の値はデフォルトで auto になります。つまり、高さは、この時点で背景画像の参照として使用されます。比例的にスケールします。対応するスクリプト機能は、backgroundSize です。

b412fb833e5ff893df4a1ab18eb1e9f7 背景画像のサイズをパーセントで指定します。負の値は許可されません。 自動 背景画像の実際のサイズ。 cover コンテナを完全に覆うように背景画像を比例的に拡大縮小します。背景画像がコンテナを超える場合があります。 contains 幅または高さがコンテナの幅または高さと等しくなるまで、背景画像を比例的に拡大縮小します。背景画像は常にコンテナに含まれます。

例: http://ued.ctrip.com/blog/wp-content/webkitcss/demo/background-size.html

テキスト関連:

-webkit-rtl-ordering:logical | ビジュアル

論理デフォルト。 ビジュアル テキストは右から左へ逆の順序でエンコードされるため、テキスト行全体を左から右にレンダリングできます。 -webkit-text-fill-color: オブジェクト内のテキストの塗りつぶしの色を設定します。 text-fill-color と color が同時に設定されている場合、text-fill-color で定義された色が color 属性をオーバーライドし、text-fill-color 属性を通じてグラデーション テキストや白抜きテキストなどの効果を作成できます。

-webkit-text -security: テキスト表示の代わりに使用する形状を指定します。

なし なし。 サークルサークル。 ディスク ラウンド。 スクエア スクエア。

 

-webkit-text-stroke ：[ text-stroke-width ] | [ text-stroke-color ]。复合属性。设置或检索对象中的文字的描边。

-webkit-writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

horizontal-tb vertical-rl vertical-lr lr-tb tb-rl

水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）

垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）

垂直方向自左而右的书写方式。即 top-bottom-left-right

左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）

上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）

-webkit-marquee:<direction> <increment> <repetition> <style> <speed>,定义展示内容的属性

5555359e1f1e0bfd7175106fc84e0dce e231104c539adf0a7f207f3bdd9973ec 9326b49e5020c5362a817d05d9d7d25f c9ccee2e6ea535a969eb3f532ad9fe89 0525e6a15abb94ecba5807e114b60ce6

文字滚动的方向

每次移动的距离

文字滚动的重复次数

文字滚动的方式

滚动或滑动的速度

 

各属性取值：

以上内容来自：http://ued.ctrip.com/blog/wp-content/webkitcss/quicksearch.html