CSS3 学習スタイル records_html/css_WEB-ITnose
1. CSS3 border
1. Rounded border-radius
border-radius: 値が大きいほど、角が丸くなります。 >
div{ width:100px; height:100px; background-color:red; border-radius:10px; border-top-left-radius:20px;}- border-top-right-radius:2em;
- border-bottom-right-radius:2em;
- border-bottom-left-radius:2em;
- 上記の 4 つのパラメータに基づいてコーナーを個別に設定することもできます。
2. シャドウ box-shadow
box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;
div{ width:100px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #d8d8d8;}h-shadow: 水平方向に右へシフト量;
v-shadow: 垂直下方向のオフセット;
blur: シャドウのサイズ;
inset: 内側のシャドウに変更します。
3. ボーダー画像 border-image
border-image-source border で使用される画像へのパス。
border-image-slice 画像の境界線は内側にオフセットされます。
border-image-width 画像の境界線の幅。
- border-image-outset 境界線イメージ領域が境界線を超える量。
- border-image-repeat 画像の境界線を繰り返すか、丸めるか、伸ばすか。
- 2. CSS3 背景
- 1. 背景画像のサイズを制御します。
padding-box 背景画像はパディング ボックスを基準に配置されます。
background-size:20px 20px;
content-box 背景画像はコンテンツ ボックスを基準にして配置されます。
- 3. 背景クリップ: 背景の描画領域を指定します。
- padding-box 背景画像はパディング ボックスを基準にして配置されます。
content-box 背景画像はコンテンツ ボックスを基準にして配置されます。
- また、CSS3ではbackground-image:で複数の画像を設定することができます。
- 3. トランジション
トランジション: 1 つの属性に 4 つのトランジション属性を設定するために使用される短縮属性。
background-image:url(1.gif),url(2.gif);
transition-duration: トランジション効果にかかる時間を定義します。デフォルトは 0 です。
- transition-timing-function: トランジション効果の時間曲線を指定します。デフォルトは「簡単」です。
- transition-lay: トランジション効果がいつ開始されるかを指定します。デフォルトは 0 です。
- トランジションタイミング関数の遷移時間には以下の種類があります。その遷移の速さを指定できます。
- linear は、同じ速度で開始および終了するトランジション エフェクトを指定します (cubic-bezier(0,0,1,1) に等しい)。
ease-in は、低速で開始するトランジション エフェクトを指定します (cubic-bezier(0.42,0,1,1) に等しい)。
- ease-out は、低速で終了するトランジション エフェクトを指定します (cubic-bezier(0,0,0.58,1) に等しい)。
- ease-in-out は、低速で開始および終了するトランジション エフェクトを指定します (cubic-bezier(0.42,0,0.58,1) と同等)。
- cubic-bezier(n,n,n,n) は、cubic-bezier 関数で独自の値を定義します。可能な値は 0 ～ 1 です。
- 3D 上でマウスを移動すると、360 度変換されます。
- 4. CSSアニメーション
<!DOCTYPE html><html><head><style> div{ width:200px; height:200px; background-color:#d8d8d8;}div:hover{ width:300px; transition: width 2s;}</style></head><body> <div></div></body></html>上記は移動しながら位置を変えたり、回転したりするアニメーションです。
div:hover{ transform: rotateY(360deg); transition: transform 2s;}属性はご自身で確認してください。過度に。
<!DOCTYPE html><html><head><style> div{ width:100px; height:100px; background-color:#d5d5d5; color:white; animation:myfirst 5s;}@keyframes myfirst{ from {margin-left:20px;} to {margin-left:520px;transform: rotateY(360deg);}}</style></head><body><div> 飞啊飞</div></body></html>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7622
15
1389
52
89
11
31
138
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
