ホームページ > 記事 > ウェブフロントエンド > CSS3 学習スタイル records_html/css_WEB-ITnose
CSS3 学習スタイル records_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:50:231089ブラウズ
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-left-radius:2em; - 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;border-box 背景画像はボーダーボックスを基準に配置されます。
content-box 背景画像はコンテンツ ボックスを基準にして配置されます。
- 3. 背景クリップ: 背景の描画領域を指定します。
- padding-box 背景画像はパディング ボックスを基準にして配置されます。
content-box 背景画像はコンテンツ ボックスを基準にして配置されます。
- また、CSS3ではbackground-image:で複数の画像を設定することができます。
- 3. トランジション
トランジション: 1 つの属性に 4 つのトランジション属性を設定するために使用される短縮属性。
background-image:url(1.gif),url(2.gif);transition-property: トランジションを適用する CSS プロパティの名前を指定します。
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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。