CSS3 学習ノート_html/css_WEB-ITnose

border-radius

Web ページを作成する際に避けては通れないテーマである角丸処理ですが、CSS3 では属性を使用して設定することができます。境界半径の半径によって要素の角を丸くします。

うわー

正方形の場合、円をレンダリングするには辺の長さの半分に設定するだけです。

border-radius: 5px;

コード

border-radius は、実際には、border 属性と同じであり、各コーナーを個別に区切ることもできます。つまり、次の 4 つの書き方があります

div {    width: 200px;    height: 200px;    border-radius: 50%; // 设置百分比    border-radius: 100px; // 设置长度一半}

最初の値。はフィレット半径のレベルで、2 番目の値が省略された場合は、最初の値と同じになります。いずれかの値が 0 の場合、角度は 1/4 フィレットになります。角度は角が丸まっていません

box-shadow

CSS3 はシャドウ効果をネイティブにサポートしています

border-top-left-radius: length, length;border-top-right-radius: length, length;border-bottom-left-radius: length, length;border-bottom-right-radius: length, length;

box-shadow 属性には最大 6 つのパラメータ設定があります:

1. Shadow type: このパラメータは、値が指定されていない場合はオプションの値です。デフォルトの投影方法は外側のシャドウです。その固有の値のインセットが使用されている場合、外側のシャドウは内側のシャドウに変わります。正または負の値。値が正の場合、影はオブジェクトの右側にあり、値が負の場合、影はオブジェクトの左側にあります

2. v-shadow: を参照します。影の垂直オフセット。その値は正の値と負の値も可能です。正の値の場合、影はオブジェクトの下部にあり、そうでない場合、値が負の場合、影はオブジェクトの上部にあります。

3. 影のぼかし距離: このパラメータはオプションですが、その値は正の値のみです。値が 0 の場合、影にぼかし効果がないことを意味します。値が大きいほど、影のエッジがぼやけます。

4. 影のサイズ: このパラメータは、正または負の値を指定できます。値が正の場合、影全体が拡大されます。

5. 影の色: このパラメータはオプションです。色が設定されていない場合、ブラウザはデフォルトの色を使用しますが、デバイスのデフォルトの色は異なります

6. box-shadow は 1 つ以上の投影を使用できます。複数のプロジェクションを使用する場合は、それらを区切るためにカンマを使用する必要があります

   box-shadow:inset h-shadow v-shadow blur-radius spread-radius color

box-sizing

この属性は、従来の境界線にも関連しています。ボックス モデルの幅は、コンテンツ領域の幅を指し、パディングやパディングとは関係がありません。 border ですが、レイアウトに特定の困難をもたらします

box-sizing はボックス モデルを変更できます

content-box: 標準ボックス モデル

border-box :

width = padding-left + padding-right + border-left-幅 + ボーダー右の幅 + コンテンツの幅
1. 高さ = パディングトップ + パディングボトム + ボーダー上幅 + ボーダー下幅 + コンテンツの高さ
2. 
   コード
   
テキストオーバーフロー

クリップ:オーバーフロー テキストを非表示にする

省略記号: トリミングされたテキストを表す省略記号を表示します。

省略記号効果には他の属性が必要です

2. box-shadow: 3px 3px 3px orange, 3px 3px 3px red;

上記のコードでは省略記号を 1 行目にしか表示できないのではないかと誰かが尋ねるのが心配です。2 行目または 3 行目に省略記号を表示したい場合はどうすればよいでしょうか。

コード

原則は、疑似要素::after を使用して実装するのが非常に簡単であるということです。

トランジションとアニメーション

CSS3 アニメーションはブラウザーでネイティブにサポートされており、スムーズであるという利点があります

トランジション (遷移)

CSS3 でトランジションが導入される前、CSS にはタイムラインがなく、すべての状態変更は瞬時に完了しました。

トランジションの役割は、状態変化に必要な時間を指定することです

div {    width: 100px; // width 包含了左右padding的宽度 + 左右border的宽度    height: 100px; // height 包含了上下padding的宽度 + 上下border的宽度    padding: 20px;    border: 1px solid #000;    box-sizing: border-box;}

コード

属性を指定します

トランジションに適用できる属性も指定できます

p {    width: 100px;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}

完全なコード

このように、高さの変更のみ実装には 1 秒かかりますが、他の変更 (主に幅) は即座に実装されます。

transition ステートメントの同じ行で、複数の属性をそれぞれ指定できます

div {    width: 100px;    height: 100px;    border: 1px solid #000;    background-color: #000;    transition: all 1s;}div:hover {    width: 200px;    height: 200px;}

Code

lay

lay: 中国語翻訳遅延は、その名前が示すように、実行ステータスの変更をどれだけ遅らせるかです。

遅延のパラメータは時間の後であることに注意してください

div {    transition: 1.5s width;}

div {    transition: 1.5s width, 1s height;}

完全なコード

遅延の本当の意味は、アニメーションが発生する順序を指定することで、複数の異なるトランジションを接続して形成することができます複雑な効果

transition-timing-function

遷移の状態変化速度 (タイミング関数とも呼ばれます) は、デフォルトでは均一ではありませんが、徐々に遅くなります。これは、イーズ

div {    transition: 状态完成时间 height, 状态完成时间 延迟时间(delay) width;}

と呼ばれます。

イーズに加えて、他のモードには

があります。

linear: 均一速度

ease-in: 高速化

ease-out: 低速化

ease-in-out: 低速で開始および終了するトランジション効果を指定

cubic-bezier 関数: カスタム速度モードリンク

メモ

1. 現在、すべての主要なブラウザ (IE 10 を含む) はすでにプレフィックスなしの遷移をサポートしているため、ブラウザのプレフィックスなしで安全に遷移を行うことができます
2. 遷移は具体的な開始ステータスと終了ステータスを数値のみで明確に把握する必要があります。中間状態は計算できません。 none から block などは機能しません。
3. 遷移は 1 回限りのイベントであり、何度もトリガーされない限り繰り返し発生することはできません。