この記事では主に CSS3 に関するちょっとした知識についてお話しますので、お役に立てれば幸いです。以下のエディターで見てみましょう。
box-shadow は p 要素に影を追加します
box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;
h-shadow: 必須。水平方向の影の位置。負の値を許可します
v-shadow: 必須。垂直影の位置。負の値を許可します
ぼかし: オプション。ファジー距離
スプレッド: オプション。影
カラーのサイズはオプションです。影の色。カラー値の完全なリストについては、CSS カラー値
インセット オプションで確認してください。シャドウを外側のシャドウから内側のシャドウに変更します
2.transform: p 要素を回転します
互換性の問題:
/* IE 9 */-moz-transform :rotate(7deg);
/* Firefox */-webkit-transform:rotate(7deg); /* Safari および Chrome */
-o-transform:rotate(7deg);
/* Opera */ 3.遷移: 移動してくださいマウスポインタを青い p 要素に移動すると、トランジション効果が表示されます。
<
マウスポインタを青色の p 要素に移動して、トランジション効果を確認してください。
!DOCTYPE html>
<html>
<head>
<style>
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
p:hover
{
width:300px;
}
</style>
</head>
<body>
<p></p>注: この例は Internet Explorer では機能しません。