ホームページ ウェブフロントエンド CSSチュートリアル CSS3レイヤーシャドウとテキストシャドウの使用

CSS3レイヤーシャドウとテキストシャドウの使用

Jun 14, 2018 pm 04:25 PM
css3

この記事では、CSS3 でのレイヤー シャドウとテキスト シャドウの使用方法を主に紹介します。必要な友達に参考にしてください。

レイヤー シャドウ属性とテキスト シャドウ。シャドウ属性は使用方法が似ています。これらはすべて X 軸と Y 軸の座標系を使用してシャドウの拡張を制御します。ここでは、CSS3 レイヤーのシャドウとテキストのシャドウ効果の使用方法を詳しく説明します。レイヤーシャドウ

box-shadow: 影の種類 はめ込むとインナーシャドウ効果になります。 X 水平オフセットと Y 垂直オフセットは正と負の値を取ることができます。X が負の場合は左側に投影され、正の場合は右側に投影されます。 Y が負の場合は上に投影され、正の場合は下に投影されます。 影のサイズと拡大はPSのものと同じです。


ブラウザの互換性:

ブラウザごとに互換性が異なります。mozilla カーネル ブラウザは次のように記述されています (ただし、Firefox の新しいバージョンでは追加する必要はありません):

-moz-box-shadow: Shadow type X 水平オフセット (正および負の値を取ることができます) Y 垂直オフセット (正および負の値を取ることができます) 影のサイズ 影の拡張影の色の値

Webkit カーネル ブラウザは次のように記述されます: -webkit-box-shadow: 影のタイプ X 水平オフセット (正および負の値を取ることができます)正と負の値を取る) Y 垂直オフセット (正と負の値を取ることができる) 影のサイズ 影の拡張影の色の値

例 1:

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:3px 3px 3px 3px #000;   
 /*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/
 -webkit-box-shadow:3px 3px 3px 3px #000;   
}
ログイン後にコピー

レンダリング:

box-shadow 投影タイプを inset に変更する、レンダリング:examepample 2:

rreee201669111325178.jpg (221×71)rendering:


201669111350004.jpg (210×57)

text-shadow textshadow

abovecss3レイヤーのシャドウボックスシャドウについて説明しました。レイヤーシャドウ 今日は、CSS3 のもう 1 つの属性である text-shadow を使用して、レイヤーとテキストのテクスチャを強調し、立体感を生み出す方法を学びます。

201669111427729.jpg (227×78)

構文:

<p class="shadow"></p>   
.shadow{   
 width:200px;   
 height:50px;   
 box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
 /*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;    //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/
 -webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
}
ログイン後にコピー
text-shadow: のディスプレイスメント レイヤーシャドウと同様に、カンマで区切って 1 つ以上のシャドウ効果のセットを同じオブジェクトに適用することもできます。 X 軸のオフセットは正または負の値を指定できます。X が正の場合は右にオフセットされ、負の場合は左にオフセットされます。 Y 軸のオフセットは正または負の値を指定できます。X が正の場合は下にオフセットされ、負の場合は上にオフセットされます。影の色の値は、#xxx、rgb、または rgba の透明色にすることができます。

例: text-shadow

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
ログイン後にコピー
表示効果は次のとおりです:


box-shadowの比較

<h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍</h1>
ログイン後にコピー

効果は次のとおりです:

表示効果は次のとおりです:

201669111554919.png (148×75)

上記はこの記事の概要です。すべてのコンテンツが皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS で透明度を設定するための rgba と不透明度の使用の違いについての分析
201669111614038.png (250×69)


CSS3 を使用して複数の要素を順番に表示する方法201669111632952.png (200×87)

CSS を使用して背景を作成する方法重複を避けるために画像を引き伸ばして塗りつぶします 表示


以上がCSS3レイヤーシャドウとテキストシャドウの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) 純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例)

Win10パソコンでフォントシャドウが発生する場合の対処法を詳しく解説 Win10パソコンでフォントシャドウが発生する場合の対処法を詳しく解説 Jul 23, 2023 pm 11:13 PM

Win10パソコンでフォントシャドウが発生する場合の対処法を詳しく解説

CSSを上手に使って色々な変わった形のボタンを実現(コード付き) CSSを上手に使って色々な変わった形のボタンを実現(コード付き) Jul 19, 2022 am 11:28 AM

CSSを上手に使って色々な変わった形のボタンを実現(コード付き)

スペースを取らずにCSS内の要素を非表示にする方法 スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

スペースを取らずにCSS内の要素を非表示にする方法

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。

CSS3でレースボーダーを実装する方法 CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS3でレースボーダーを実装する方法

css3アダプティブレイアウトとは何ですか css3アダプティブレイアウトとは何ですか Jun 02, 2022 pm 12:05 PM

css3アダプティブレイアウトとは何ですか

CSS3でマウスクリックで画像を拡大する方法 CSS3でマウスクリックで画像を拡大する方法 Apr 25, 2022 pm 04:52 PM

CSS3でマウスクリックで画像を拡大する方法

See all articles