ホームページ > 記事 > ウェブフロントエンド > css3を使用した影効果の実装例

css3を使用した影効果の実装例

小云云オリジナル: 2017-11-20 17:14:092306ブラウズ

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を使用した影効果の実装例

関連記事