CSS3 学習ノート Linear-gradient_html/css_WEB-ITnose

私も CSS3 を少し読んで、いくつかの属性を試してみましたが、とても良いと思います。私自身、CSS3を学習しましたと言える勇気はなく、自分にとって小さなことは自分の視点で判断するしかないと感じています。私の意見では、「単純な」HTML であっても研究する価値はあります。常に謙虚な姿勢を維持することによってのみ、より先を見据え、より着実に進むことができます。

ここの Web サイトに感謝したいと思います:

w3cplus、W3School、W3C およびその他のオンライン チュートリアルとブログ (他にもたくさんありますが、1 つずつリストすることはしません)。伝説的な CSS3 と HTML5 に触れると、私自身の学習ノートが自然にそこから得られます。

提案: ほとんどの CSS3 プロパティはまだドラフト段階です

例:

{

    -webkit-border-radius:10px;

    -moz-border-radius:10px;

    -o-border-radius:10px;

    border-radius:10px;

今日の紹介は CSS3 グラデーション: Linear-gradient についてです。

グラデーションは、Web ページでは非常に一般的な効果であると考えてください。しかし、CSS3 が登場する前は、グラデーション効果は画像を使用して実現する必要がありました。これは、前述の角丸や影と同様に、画像の使用が Web ページのパフォーマンスにある程度の影響を与えることは間違いなく、その後の Web サイトのメンテナンスや修正にも問題が生じるため、問題が発生します。これまでのところ、CSS3 グラデーションは、ブラウザーがこの属性をサポートしている限り、プライベート プレフィックスを除いて、他の記述方法と同じです。

最初に、Webkit で使用したものは次のとおりです:

}

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

而到现在，在webkit下使用的是：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新书写语法 

现在，新式语法与其他浏览器，包括firefox，opera的语法书写统一（现在的opera已经使用了webkit内核）；

線形グラデーション

私の意見では、グラデーションのパラメータは多様で少し複雑なので、簡単なものから始めましょう

Linear-gradient の最も単純な構文:

linear-gradient (開始点、開始色、終了色);

開始点はグラデーションが開始する位置を示し、色は開始色から終了色までのグラデーションです。 。

グラデーションの開始点を記述するにはさまざまな方法があります:

1. 上、右、下、左のいずれかを使用して、グラデーションの開始点を指定します

其实gradient，分成两种一种是线性渐变（linear-gradient），另一种是径向渐变（radial-gradient）。我们可以将linear-gradient和radial-gradient添加到任何可以接受图片的属性，比如：backgorund-images，list-style-image等等。今天我要介绍的就是标题上的linear-gradient。

.test{

    background:-webkit-linear-gradient(top,#fff,#000);

    background:-moz-linear-gradient(top,#fff,#000);

    background:-o-linear-gradient(top,#fff,#000);

2. 少し複雑ですが、上と左または右の組み合わせを使用することも、下と左または

右の組み合わせを使用して、グラデーションの開始点を変更することもできます。ただし、上は下と組み合わせることはできず、左は右と組み合わせることはできません

    background:linear-gradient(top,#fff,#000);

.test{

    background:-webkit-linear-gradient(top right,#fff,#000);

    background:-moz-linear-gradient(top right,#fff,#000);

    background:-o-linear-gradient(top right,#fff,#000);

    background:linear-gradient(top right,#fff,#000);

}

.test{

    background:-webkit-linear-gradient(bottom left,#fff,#000);

    background:-moz-linear-gradient(bottom left,#fff,#000);

    background:-o-linear-gradient(bottom left,#fff,#000);

3 上記の 2 つの書き方では、限られた数しか描画できません。グラデーションの。角度を使用して、グラデーションの開始点を設定できます。

以下のコードをテンプレートとして使用し、「0deg」を希望の角度に変更します

    background:linear-gradient(bottom left,#fff,#000);

}

.deg0{

    background:-webkit-linear-gradient(0deg,#fff,#000);

    background:-moz-linear-gradient(0deg,#fff,#000);

    background:-o-linear-gradient(0deg,#fff,#000);

12 div を追加し、差として 30deg を追加しました。

その結果に基づいて、この絵をもう一度描きました

角度を使用してグラデーションの開始点を設定すると、0 度が下に対応し、90 度が左に対応し、180 度が上に対応することがわかります。 360 度は右に相当します。全体のプロセスは、下から始めて反時計回りに回転することです。

今のところは出発点くらいしか分かりませんが、今後草案が改訂される場合は、分かり次第すぐに更新します。

グラデーションの色の設定も変更できます:

グラデーションには 3 つ以上の色を含めることができ、開始色と終了色の間にさらに多くの色を追加できます。

    background:linear-gradient(0deg,#fff,#000);

}

.test{

    background:-webkit-linear-gradient(top,#fff,red,#000,red);

    background:-moz-linear-gradient(top,#fff,red,#000,red);

    background:-o-linear-gradient(top,#fff,red,#000,red);

または:

    background:linear-gradient(top,#fff,red,#000,red);

}

.test{

    background:-webkit-linear-gradient(top,red,yellow,blue,green,purple,orange);

    background:-moz-linear-gradient(top,red,yellow,blue,green,purple,orange);

    background:-o-linear-gradient(top,red,yellow,blue,green,purple,orange);

上の例では、色のグラデーションが均一になるように、各色のグラデーションの位置を指定することもできます。エントはこれも単純な均一な変更ではなく、変更したい色の後にグラデーションのテキストを追加するだけです。シンプルかつ直感的にするために、3 色のみを使用しました。

ユニフォーム変更

    background:linear-gradient(top,red,yellow,blue,green,purple,orange);

}

.test{

    background:-webkit-linear-gradient(red ,green,blue);

    background:-moz-linear-gradient(red ,green,blue);

    background:-o-linear-gradient(red ,green,blue);

位置追加後

    background:linear-gradient(red ,green,blue);

}

.test{

    background:-webkit-linear-gradient(red 50% ,green,blue);

    background:-moz-linear-gradient(red 50% ,green,blue);

    background:-o-linear-gradient(red 50% ,green,blue);

もちろん、カラーフォーマットがCSS3を使用している場合の rgba 形式の場合、グラデーションは透明になります。

linear-gradient の紹介は以上です。間違いがあればメッセージを残してください。

radial-gradient を勉強したとき、radial-gradient についてメモを取ることができませんでした