簡単にマスターできる 3 つの小さな特殊効果 - テキストのくり抜き、透明度、影の効果

この記事では、CSSでの文字のくり抜き、透明度の値、影の効果の設定例を中心に紹介します。 文字のストロークの色の透明度の値を設定することで、文字をある程度柔らかくすることができます

text-fill-color は空のテキストを作成します:
Code

CSS Codeコンテンツをクリップボードにコピーします

1. -webkit-text-fill-color:transparent;キット-text-ストローク:

   1px
2. #000

   ; 効果

text-ストローク-カラーの透明度の値はテキストを柔らかくします:

コード

CSSコード

コンテンツをクリップボードにコピーします

背景画像

:-webkit-linear-gradient(

#eee
1. ,

   #000); -webkit-背景

   -
クリップ
2. :テキスト

   -webkit-text-fill-color:

   transparent
;

3. 効果 1

コード

CSS コード

コンテンツをクリップボードにコピー

背景-画像 :-ウェブキット-linear-gradient(

#eee

,
1. #000

   ); -webkit-背景-

   クリップ
:テキスト:
2. 透明

   ; 1px transparent;

3. 効果 2 比較すると、効果 2 のテキストが効果 1 より柔らかいことがわかります

4. text-shadow テキストシャドウ

   構文: CSSコード

コンテンツをクリップボードにコピーします

box-reflect:

none

| [ {2,3} && color

>? コンテンツをクリップボードにコピーします

text-shadow: 2px

2px

0
1. #000

   ; Effect

text-shadow には 3 つの長さパラメータがあり、最初の表現は水平オフセット、2 番目は垂直オフセット、3 番目はブラー (オプション) を意味します。テキストシャドウ:

コード

CSSコード

コンテンツをクリップボードにコピー

1. text-shadow

   :1px1px5px#000;

テキスト-シャドウ:

1px

5px

#000

;

効果

以上が簡単にマスターできる 3 つの小さな特殊効果 - テキストのくり抜き、透明度、影の効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。