以下の属性はブラウザとの互換性があまりありません。 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> |
>>: Docker環境でMySQLを実行し、Binlogを有効にしてマスタースレーブ同期を構成する方法
1. 関連する技術的なポイントバイト版ヴュー3 ts統合ルーティングvuexを統合するAxiosを統...
この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...
どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...
1. package.jsonに追加する "メイン": "electr...
目次序文1. どのような変数が促進されますか? 2. 可変プロモーションがあるのはなぜですか? (1...
目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...
会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...
この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...
まずMySQLの公式ドキュメントを見てみましょう: 5.7 {データベース | スキーマ} を作成 ...
目次1. なぜ vue3 が必要なのでしょうか? 2. vue3の利点3. 応答原則の違い4. ライ...
Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...
目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....
find コマンドは主にディレクトリやファイルを検索するために使用され、一致のために複数のパラメータ...
1. データのバックアップ1. mysqldumpコマンドを使用してバックアップするmysqldum...
フロントエンド プロジェクトとバックエンド プロジェクトは分離されており、フロントエンドとバックエン...