ホームページ > 記事 > ウェブフロントエンド > CSS3 に関するちょっとした知識

CSS3 に関するちょっとした知識

零到壹度オリジナル: 2018-03-21 11:42:051077ブラウズ

この記事では主に 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 要素に移動すると、トランジション効果が表示されます。
ad846d1ec8764448f5d4e08a5ccc7b3fマウスポインタを青色の p 要素に移動して、トランジション効果を確認してください。 94b3e26ee717c64999d7867364b1b4a3
```
!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>
```
e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419注: 0d36329ec37a2cc24d42c7229b69747aこの例は Internet Explorer では機能しません。 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

以上がCSS3 に関するちょっとした知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：CSSで「読み込み中」プロンプトボックスを作成する次の記事：CSSで「読み込み中」プロンプトボックスを作成する

続きを見る