ホームページ >ウェブフロントエンド >CSSチュートリアル >css3を使用した影効果の実装例
CSS3 は CSS テクノロジーのアップグレードされたバージョンであり、CSS3 言語開発はモジュール化に向けて発展しています。以前の仕様はモジュールとして大きすぎて複雑だったので、より小さなモジュールに分割され、さらに新しいモジュールが追加されました。これらのモジュールには、ボックス モデル、リスト モジュール、ハイパーリンク メソッド、言語モジュール、背景と境界線、テキスト効果、複数列レイアウトなどが含まれます。この章では、簡単な CSS3 シャドウ効果の例を説明します。 CSS3 のshadowプロパティを使用して、Webページの要素に影効果を追加できます。これは新しい機能です。ただし、この機能は、Firefox 3.5、Safari 3.1 以降、Google Chrome など、CSS3 をサポートするブラウザでのみ動作します。
css3のshadow属性の使い方についてお話します。
css3 シャドウは主に box-shadow 属性を使用します。
box-shadow: b006ffc8dfc78701761acfb2c8b8dadd それぞれの意味上記の属性値は以下の通りです:
horizontal (horizontal): 水平方向のオフセットシャドウを指定します。正の値 (例: 5px) は影を右にシフトし、負の値 (例: - 10px) は影を左に偏らせます。
vertical: 垂直オフセットシャドウを指定します。正の値 (例: - 5px) はボックスの下部に影を作成しますが、負の値 (例: - 10px) は影を上にバイアスします。ぼかし: 軟化半径を設定します。デフォルト値は 0 で、ブラーなしを意味します。正の値を指定するとブラーが増加し、負の値を指定すると実際に影が縮小します。このプロパティのデフォルトは 0 です。
clolor (色): 影の色を設定する色の値。
リマインダー: この属性は、画像、Div、SPAN、P タグなどの任意の要素に追加できます。
具体的な影の例を見てみましょう。以下は効果と具体的なコードの例です:
<html xmlns="http://www.phpernote.com/"> <head> <title>CSS3阴影效果实例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #shadow { box-shadow: 10px 10px 5px #888888; width:500px; padding:5px; text-align:center; font-size:20px; background:#21759b; margin:0 auto; color:#ffffff; } </style> </head> <body> <div id="shadow">矩形的 CSS3 的阴影</div> </body> </html>
上記は CSS3 の簡単なチュートリアルです。皆さんのお役に立てれば幸いです。
関連する推奨事項:
さまざまな基本グラフィックスを描画するための CSS3 のヒント CSS3 カスタム スクロール バー スタイルの詳細な例 CSS3 アニメーションでの円運動軌道の実装以上がcss3を使用した影効果の実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。