マスク反射グラデーション_html/css_WEB-ITnose

1. 背景の放射状グラデーション:

background:-webkit-radial-gradient(30% 30%, #fff 0%, #000 100%) ;

2. 背景の線形グラデーション:

背景: - webkit-linear-gradient(top,#000 0%,#ccc 30%,#ddd 35%,#000 100%);

3. テキストのグラデーション:

background:-webkit-linear-gradient(left , #f00,#ff0 25%,#0f0 40%,#0ff 55%,#00f 70%,#f00);

-webkit-background-clip:text;/*テキストに背景のみを表示し、Webkit のみを表示しますカーネルはテキスト切り取りモードをサポートします*/

color:transparent;/*テキストを透明にする*/

4. マスク:

理論的知識:

-webkit-mask-image:url |画像またはグラデーションをマスクレイヤーとして使用できます*/

-webkit-mask-repeat:repeat | stop-y | no-repeat

img{

-webkit-mask-image:url("image1.png");

-webkit-mask-repeat:no-repeat

}

画像マスク:

img{

-webkit-mask-image:-webkit-radial-gradient(50% 50%,rgba(0,0,0,0),rgba(0,0,0,1)) ;//

-webkit-mask-position:70%;//

-webkit-mask-repeat:no-repeat;//

}

画像マスクにグラデーションを追加: (画像に色を追加する機能です。透明度グラデーション)

構文:

?-webkit-box-reflect: none | ?

方向: 上/下/左/右:

オフセット: 生成された反射とオブジェクト (元の画像) の間の距離を設定するために使用されます。値は固定ピクセル値またはパーセンテージ値です。

マスク ボックス イメージ。 : 反射マスク効果を設定するために使用されます。背景画像またはグラデーションによって生成された背景画像を使用できます。

反射マスク画像を直接使用します:

div img{

width:200px ; webkit-box-reflect:right 5px url(2.png);

}

直接使用倒影渐变色：

img{

-webkit-box-reflect:below 5px -webkit -radial-gradエント(中央中央,rgba(255,255,255,0.6) 20%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 60%) ;