Pythonプロジェクト-Day 33-border-box-shadow-線形グラデーション-transition(遷移アニメーション)-flexレイアウト

3298 ワード
web

Pythonプロジェクト-Day 33-border-box-shadow-線形グラデーション-transition(遷移アニメーション)-flexレイアウト

  • border(枠線のフィレットスタイルの設定)
    border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius
    以上のスタイルは、それぞれ片側または多辺を設定、半径の大きさはpx、パーセント、em 
    border-top-left-radius:10px
border-top-left-radius:20px 10px;
border-radius:50% 20px 25% 5em/25% 15px 40px 55%
    • を使用することができる.
  • border-image(枠画像の設定)は、画像を9つの部分に分割する、4つの角の画像を枠の4つの頂点とし、残りの部分を枠の4辺とする、例えば、
    border-image:url(/i/border.png) 30 30 stretch;
    • .
  • box-shadow(シャドウスタイルの適用)フォーマット:box-shadow:hoffset voffset blur spread color inset例:
    box-shadow: 10px 10px 10px 50px red inset;

/* 10px    10px   / 50px   red  */
  • text-shadow(テキストシャドウ設定)たとえば
    text-shadow: 5px 5px 5px grey;
  • text-overflow(テキストトリミング)
    パラメータ名
    説明
    clip
    省略記号を末尾に使用しない
    ellipsis
    省略記号を末尾に使用
    テキストカットの効果を達成するには、次のようにする必要があります.
  • 改行しない(white-space)
  • overflow制御オーバーフロー
    • を使用する必要があります.
    例:
    text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
  • text-stroke(テキスト線)フォーマット:text-stroke:線幅線の色;注意:
  • このスタイルは、すべてのブラウザが
    • をサポートしているわけではありません.
  • 接頭辞修飾子
    • を追加する必要がある.
    例:
    -webkit-text-stroke: 1px yellow;
  • css接頭辞
  • エレガントなダウングレード-新しいブラウザの設計方法
    • を先に満たす
  • 徐々に強化-一般的なブラウザの設計方法
    • を先に満たす
  • 優雅な降格は、新しいバージョンのブラウザ
    • に適しています.
  • 旧バージョンのブラウザテストブラウザ互換性に適した漸進的な強化
    • 例:
    // 

-o-border-image: url("");
-webkit-border-image: url("");
border-image: url("");

// 

border-image: url("");
-o-border-image: url("");
-webkit-border-image: url("");
  • 線形グラデーションフォーマット:background:linear-gradient(方向、色1、色2...);例えば、
    #grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /*  （ ） */
}
    色グラデーション
    • について
  • transformプロパティ例:
    transform:  translate(200px,202px) skew(45deg);
    tramsform-originプロパティ:このプロパティは変形のデータム点を変更するために使用され、デフォルトでは中心にあり、スペース間隔例えば:
    transform-origin: 0% 40%;
  • transition(トランジションアニメーション)トランジションは、click、hover、foucs、checkedなどのイベントフォーマット:transition:制御されたプロパティ1アニメーション持続時間アニメーション効果遅延時間;例:
    transition：background-color  1s  ease 0s；
transition：color  1s  linear  1.0s；
transition：all  1s  ease 0s；
  • キーフレームアニメーションFlashのようなキーフレームによって制御されるアニメーション方式を利用し、遷移アニメーション機能よりも強力なアニメーション原理@keyFramesによるキーフレームアニメーションの作成animationによるキーフレームアニメーションコードの呼び出し例:
    /*change */
@keyframes change {
        0%{
            background-color: red;
        }
        50%{
            background-color: purple;
        }
        100%{
            background-color: lime;
        }

    }
    .div-02:hover{
    /*animation change */
        animation: change 2s linear;
    }
    • flexレイアウトの詳細
    プログラマー|Lv.2練習問題Part.3_JS
    [JQ権威ガイド]SlideDown()とSlideUp()メソッドによるスライド効果