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

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を有効にしてマスタースレーブ同期を構成する方法

推薦する

vite2.0+vue3 モバイルプロジェクトの詳細な説明

1. 関連する技術的なポイントバイト版ヴュー3 ts統合ルーティングvuexを統合するAxiosを統...

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

Vue プロジェクトに Electron を追加するための詳細なコード

1. package.jsonに追加する "メイン": "electr...

JavaScript 変数の昇格についての簡単な説明

目次序文1. どのような変数が促進されますか? 2. 可変プロモーションがあるのはなぜですか? (1...

Linux 構成 SSH パスワードフリーログイン「ssh-keygen」の基本的な使い方

目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...

ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル

この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...

MySQLデータベースを作成し、中国語の文字をサポートする方法

まずMySQLの公式ドキュメントを見てみましょう: 5.7 {データベース | スキーマ} を作成 ...

Vue3とVue2の利点のまとめ

目次1. なぜ vue3 が必要なのでしょうか? 2. vue3の利点3. 応答原則の違い4. ライ...

HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法

Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...

MySQLのマスタースレーブレプリケーションと読み取り書き込み分離を理解するための記事

目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....

Linux テキスト検索コマンド find の詳細な使用方法

find コマンドは主にディレクトリやファイルを検索するために使用され、一致のために複数のパラメータ...

MySQL データのバックアップと復元のサンプル コード

1. データのバックアップ1. mysqldumpコマンドを使用してバックアップするmysqldum...

同じドメイン名を持つ Nginx プロキシのフロントエンドとバックエンドの分離プロジェクトの完全な手順

フロントエンド プロジェクトとバックエンド プロジェクトは分離されており、フロントエンドとバックエン...