HTML におけるいくつかの特殊属性タグの使用法の紹介

以下の属性はブラウザとの互換性があまりありません。

1.transform:rotate(45度)
2.border-top-left-radius このプロパティを使用すると、要素に丸い境界線を追加できます。
3.border-radius このプロパティは要素に丸い境界線を追加することができます
4. box-shadowプロパティはボックスに1つ以上の影を追加します
5. text-shadowプロパティはテキストに影を設定します
6. 移行

さまざまなブラウザとの互換性を高めるために、プレフィックスが必要です。
-o- /*Opera ブラウザ*/
-webkit- /*Webkit ベースのブラウザ Safari および Chrome*/
-ms- /*IE 9*/
-moz- /*Firefox ブラウザ*/

1.transform:rotate(45度)
オブジェクトを回転するには、transformプロパティを使用します。ここで、(45deg)は回転角度です。

変換:回転(45度);
-ms-transform:rotate(45deg); /*IE 9*/
-o-transform:rotate(45deg); /*Opera ブラウザ*/
-webkit-transform:rotate(45deg); /*Webkit ベースのブラウザ Safari および Chrome*/
-moz-transform:rotate(45deg); /*Firefoxブラウザ*/

2.border-top-left-radius border-radius このプロパティを使用すると、要素に丸い境界線を追加できます。 <br />前者は、丸い境界線を追加する場所を選択できます。
境界線の左上の半径、境界線の右上の半径、境界線の左下の半径、境界線の右下の半径
border-top-left-radius このプロパティを使用すると、要素に丸い境界線を追加できます。これは border-radius と同じですが、丸い境界線を追加する場所を制御できます。

3. box-shadowプロパティはボックスに1つ以上の影を追加し、text-shadowプロパティはテキストに影を設定します。
ボックスシャドウ: h-shadow || v-shadow || ぼかし || スプレッド || 色 || インセット;
プロパティ: 水平方向の影の位置|| 垂直方向の影の位置|| ぼかし距離|| 影のサイズ|| 影の色|| 外側の影 (アウトセット) を内側の影に変更
ボックスの影:1px 1px 3px #292929;

テキストシャドウ: h-shadow || v-shadow || ぼかし || 色;
テキストシャドウ: 0px -1px 0px #000;

4. 移行
プロパティ || 期間 || タイミング関数 || 遅延
トランジション効果を設定する CSS プロパティの名前を指定します|| トランジション効果が完了するまでの秒数またはミリ秒数を指定します|| 速度効果の速度曲線を指定します|| トランジション効果がいつ開始するかを定義します

現在、 transition プロパティはすべてのブラウザでサポートされているわけではありません。
デフォルト。アニメーションはゆっくりと始まり、その後加速し、最後に減速して終了します。
アニメーションは低速で開始されます。
イーズアウトアニメーションは低速で終了します
イーズインアウトアニメーションは低速で始まり、低速で終わります

トランジション:背景 5秒の緩和;

例:

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<スタイル>
分割
{
幅:100ピクセル;
高さ:100px;
背景:青;
トランジション:幅 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari と Chrome */
-o-transition:width 2s; /* オペラ */
}
div:ホバー
{
幅:300ピクセル;
}
</スタイル>
</head>
<本文>
<div></div>
<p>トランジション効果を確認するには、マウスポインターを青い div 要素の上に移動してください。 </p>
<p><b>注意:</b> この例は Internet Explorer では動作しません。 </p>
</本文>
</html>

例2:

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<スタイル>
分割
{
幅:100ピクセル;
高さ:100px;
背景:青;
遷移プロパティ:背景;
遷移期間:5秒;
/* Firefox 4 */
-moz-transition-property:背景;
-moz-トランジション期間:5秒;
/* Safari と Chrome
-webkit-transition-property:背景;
-webkit-transition-duration:5s;*/
トランジション:背景 5秒の緩和;
/* オペラ */
-o-トランジションプロパティ:背景;
-o-遷移期間:5秒;
}
div:ホバー
{
背景:赤;
}
</スタイル>
</head>
<本文>
<div></div>
<p>トランジション効果を確認するには、マウスポインターを青い div 要素の上に移動してください。 </p>
<p><b>注意:</b> この例は Internet Explorer では動作しません。 </p>
</本文>
</html>

<<: CSSスタイルのカスケーディングルールの詳細な説明

>>: Docker環境でMySQLを実行し、Binlogを有効にしてマスタースレーブ同期を構成する方法