CSS3 を使用して、常に変化するテキストシャドウのテキストシャドウ効果デザインを実現します。-CSSチュートリアル-php.cn

CSS3 を使用して、常に変化するテキストシャドウのテキストシャドウ効果デザインを実現します。

高洛峰

リリース： 2017-03-13 17:37:18

オリジナル

2137 人が閲覧しました

この記事では主に CSS3 を使用して変化するテキストシャドウtext-shadowエフェクトデザインを実現するための関連情報を紹介します。興味のある方は参考にしてください

この記事の例では、常に変化するtext-を共有します。 CSS3 のshadowテキスト - 参考のための影効果の例。具体的な内容は次のとおりです

構文:

none||none|[,]*
または
none||[,]*

値の簡単な説明:

は色を表し、

は浮動小数点数で構成される長さの値を表します。単位識別子。負の値にすることができ、影を指定します。水平拡張距離

は、浮動小数点数と単位識別子で構成される長さの値を表します。負の値にすることはできず、ブラー効果の距離を指定します。。ぼかし効果のみが必要な場合は、最初の 2 つの長さを 0 に設定します。

例:

<style type="text/css">   
p{   
    text-align:center;   
    margin:0;   
    font-family:helvetica,arial,sans-serif;   
    color:#999;   
    font-size:80px;   
    font-weight:bold;   
    text-shadow:0.1em 0.1em #333;//右下角阴影   
    text-shadow:-0.1em -0.1em #333;//左上角阴影   
    text-shadow:-0.1em 0.1em #333;//左下角阴影   
    text-shadow:0.1em 0.1em 0.3em #333;//增加模糊效果的阴影   
    text-shadow:0.1em 0.1em 0.3em black;//定义文本阴影效果   
}   
</style>

ログイン後にコピー

CSS3 を使用して、常に変化するテキストシャドウのテキストシャドウ効果デザインを実現します。

**簡単な要約: ** text-shadowプロパティの最初の値は水平方向の変位を表し、2番目の値は垂直方向の変位を表し、正の値は右側または下向き ; 負の値は上または左に傾斜します。3 番目の値はオプションのぼかし半径を表します。

例: 影を通して前景色と背景色のコントラストを高める

p{   
    text-align:center;   
    margin:150px auto;   
    font-family:helvetica,arial,sans-serif;   
    font-size:80px;   
    font-weight:bold;   
    color:#fff;//设置文字颜色   
    text-shadow:0.1em 0.1em 0.3em black;//通过阴影增加前景色和背景色的对比   

}

ログイン後にコピー

概要:

影のオフセットは、2つの値によるテキストからの距離によって指定されます。。最初の長さの値は、テキストの右側への水平距離を指定します。負の値は、テキストの左側に影を配置します。 2 番目の長さの値は、テキストの下端からの垂直距離を指定します。負の値を指定すると、テキストの上に影が配置されます。

シャドウオフセット後、ぼかし半径を指定できます。ブラー半径は、ブラー効果の範囲を指定する長さの値です。

シャドウ効果の長さの値の前後に色の値を指定することもできます。カラー値はシャドウ効果のベースとして使用されます。色が指定されていない場合は、代わりに color 属性値が使用されます。

例: 複雑なテキスト効果のシミュレーション

p{   
    text-align:center;   
    margin:0;   
    padding:24px;   
    font-family:helvetica,arial,sans-serif;   
    font-size:80px;   
    font-weight:bold;   
    color:#000;//设置文字颜色   
    background:#000;//设置背景颜色   
    text-shadow:0 0 4px white,    
                0 -5px 4px #ff3,   
                2px -10px 6px #fd3,   
                -2px -15px 11px #f80,   
                2px -25px 18px #f20;//使用阴影叠加出燃烧的文字特效   
}

ログイン後にコピー

CSS3 を使用して、常に変化するテキストシャドウのテキストシャドウ効果デザインを実現します。