CSSで影効果を追加するには? text-shadow 属性と box-shadow 属性を使用して追加できます。以下の記事では、text-shadow 属性と box-shadow 属性がどのように影効果を追加するかを紹介します。必要な方は参考にしていただければ幸いです。
おすすめマニュアル: CSS3最新版リファレンスマニュアル
1: テキストの影効果を追加する(text-shadow属性)
1 text-shadowとは
text-shadow はテキストへの影の追加をサポートしているため、画像を使用せずにデザイン中に CSS3 属性を使用してテキストのテクスチャを増やすことができます。現在サポートされているブラウザには、Firefox 3.1 以降、Safari 3 以降、Opera 9.5 以降、その他の最新のブラウザが含まれます。データは偏っている可能性があります)。もちろん、IE ファミリではサポートできません。
2. text-shadow: rreee
color: color; 「長さ、Y 軸方向」の順で「長さシャドウブラー半径」は浮動小数点数と単位識別子で構成される長さの値を表します。負の値（または 0 値）にすることができ、影の水平方向の延長距離を指定します。
例の正の値:
text-shadow:color length length length;
text-shadow 属性の最初の値は水平移動を表し、2 番目の値は垂直移動を表します。正の値は右または下を意味し、負の値は左または上を意味します。半径を意味し (この値はオプション)、4 番目の値は影の色を表します (この値はオプション)。この色の値は影効果の長さの値の前後に配置できます。色が指定されていない場合は、代わりに color 属性の値が使用されます。
3. コード例
主に text-shadow のシャドウ リストを使用し、適切なカラー マッチングを使用して、目的の効果を実現します。text-shadow:0.1em 0.1em 0.3em #333333;レンダリング: おすすめ関連記事:
1.
2.CSS3でボックスシャドウを実現する方法? CSS3の影効果
関連ビデオチュートリアル:
1.CSSビデオチュートリアル-翡翠少女般若心経編
2. ボックス(枠線)の影効果(box-shadow属性)を追加します
1 .box-shadow の構文
E {box-shadow: inset x-offset y-offset Blur-radius Spread-Radius color};E {box-shadow: 投影モード X 軸オフセット Y 軸オフセット シャドウのぼかし半径 シャドウの拡張半径 シャドウの色}; 値:
1. シャドウのタイプ: このパラメータはオプションで、値「inset」のみを使用すると、外側のシャドウが回転します。内側のシャドウに。2. シャドウの垂直方向のオフセットを指します。正の値の場合、シャドウはオブジェクトの下部にあります。オブジェクトの上部。
4. シャドウのブラー半径: このパラメーターは正の値のみです。値が大きいほど、エッジがブラーされません。影の拡張半径: このパラメータは正または負の値を指定でき、それ以外の場合は影が縮小されます。 color: このパラメータはオプションです。色が設定されていない場合、ブラウザはデフォルトの色を使用しますが、各ブラウザのデフォルトの色は異なり、特に Webkit カーネル下の Safari および Chrome ブラウザは無色、つまり透明になります。このパラメータを省略しないことをお勧めします。
2. 互換性を考慮する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字阴影效果</title>
<style type="text/css">
.demo{
width: 600px;
overflow: hidden;
margin: 10px auto;
}
p {
width: 300px;
font-size: 3em;
margin: 10px;
padding: 20px;
text-align: center;
}
.p1 {
text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
color: red;
}
.p2 {
background: black;
text-shadow: 0 -5px 4px #FF3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
color: red;
}
.p3 {
text-shadow: -1px -1px white, 1px 1px #333;
color: #D1D1D1;
font-weight: bold;
background: #CCC;
}
.p4 {
text-shadow: 1px 1px white, -1px -1px #333;
color: #D1D1D1;
font-weight: bold;
background: #CCC;
}
.p5 {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
color: #ffffff;
background: #CCC;
}
.p6 {
text-shadow: 0 0 0.2em #F87, 0 0 0.2em #f87;
color: #d1d1d1;
background: #CCC;
}
</style>
</head>
<body>
<div class="demo">
<p class="p1">多色阴影效果</p>
<p class="p2">火焰效果</p>
<p class="p3">立体凸起效果</p>
<p class="p4">立体凹下效果</p>
<p class="p5">描边效果</p>
<p class="p6">外发光效果</p>
</div>
</body>
</html>3. コード例
//Firefox4.0- -moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; //Safari and Google chrome10.0- -webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; //Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;レンダリング:
以上がCSSで影効果を追加するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
「CSS4」アップデートApr 11, 2025 pm 12:05 PM私が最初にCSS4¹のことを鳴らしたので、それについてもっと多くの議論がありました。私はここで他の人から私のお気に入りの考えをまとめようとしています。がある
3種類のコードApr 11, 2025 pm 12:02 PM新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います
HTTPSは簡単です！Apr 11, 2025 am 11:51 AM私は、httpsの複雑さを公に嘆きながら罪を犯しました。過去に、私はサードパーティのベンダーからSSL証明書を購入し、問題がありました
JavaScriptの不変性を理解するApr 11, 2025 am 11:47 AMJavaScriptの不変性を以前に作業したことがない場合は、変数を新しい値または再割り当てに割り当てることと混同しやすいことがわかります。
最新のCSS機能を備えたカスタムスタイリングフォーム入力Apr 11, 2025 am 11:45 AM最近、カスタムチェックボックス、ラジオボタン、トグルスイッチを構築することは完全に可能です。必要でさえありません
HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法Apr 11, 2025 am 11:29 AMプロジェクトにカウントダウンタイマーが必要だったことはありますか？そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
Dreamweaver Mac版
ビジュアル Web 開発ツール
メモ帳++7.3.1
使いやすく無料のコードエディター
