css3共通属性の式の種類_html/css_WEB-ITnose

css3 の使用法はさまざまな Web サイトで配布されており、その使用法はフロントエンド開発者にとって非常に役立ちます。たとえば、以前の角丸四角形は背景画像で完成させる必要がありましたが、現在は border-radius のみを使用します。 : 5px; 今日は、CSS3 の一般的に使用される属性をいくつか記録します。

Box プロパティ: Border fillet: radius, bordershadow: box-shadow

Border: border-radius:top-left top-rightbottom-rightbottom-left;

ここで、ボックスの境界線のスタイルについて簡単に説明します。

border-radius:10px;

border-radius:10px;

border-top-left-radius:10px;

border-top-left-radius:10px;

box-shadow:h-shadow Blur color inset/outset

box- shadow:5px 5px 5px red;

デフォルトは外側のシャドウアウトセットです

box-shadow:5px 5px 5px red;

box-shadow:5px 5px 5px red inset

box-shadow:5px 5px 5px red inset;

もちろん、後ろに「,」を追加するだけで複数のシャドウを設定できます。 。

box-shadow:5px 5px 5px red inset,-5px -5px 5px green;

box-shadow:5px 5px 5px red inset,-5px -5px 5px green;

2D/3D 変換: 変換: 回転、拡大縮小、傾斜

ブラウザサポート: IE10、filfox、opera

さまざまなブラウザとの互換性を実現するには、次のメソッドを使用してください

-ms-transform:rotate(45deg); /* IE 9 */-moz-transform:rotate(45deg); /* Firefox */-webkit-transform:rotate(45deg); /* Safari and Chrome */-o-transform:rotate(45deg); /* Opera */transform:rotate(45deg);

現在のスコープは 2D のみなので、2D の例から始めましょう

transform:rotate(Xdeg) は角度回転を定義します

変換:回転(0度)

transform:rotate(45deg)

transform:rotate(45deg)

transform:rotate(Xdeg) は角度回転を定義します

実用性は知恵次第です。

transform:scale(x): スケーリングパラメータはスケーリングの倍数です

transform:scale(1.5)

注: 元の基礎の x、y 方向のスケーリングを指します

skew() メソッド

transform:skew(0deg,45deg)

skew() メソッドを通じて、要素は指定された水平線 (X 軸) と垂直線 ( Y 軸) パラメータ:

CSS3 アニメーション: animate

アニメーション:myanimation 5 秒線形無限

アニメーション:myanimation 5 秒線形無限 (指定されたフレーム名、実行間隔、効果、実行数)

<div style="height: 100px; width: 100px; text-align: center; border: 4px solid rgb(0, 0, 255);animation:myanimation 5s linear infinite;">animation:myanimation 5s linear infinite</div><p><style type="text/css">@keyframes myanimation{    0%{       background-color:red;     }    50%{       background-color:green;     }    100%{       transform:rotate(720deg);       border-radius:50%;       background-color:gray;     }  }</style>

アニメーション実行効果: リニア: 均一速度、イーズ: 均一加速、イーズイン: 減速開始、イーズアウト: 減速終了、イーズインアウト: 減速開始と減速終了。

その他のエフェクト: URL: http://2.liteng.sinaapp.com/HTML5/index.html

次の記事では、css3 セレクターの使用方法を記録します