グラデーショントーク_html/css_WEB-ITnose

仕事の小さなプロジェクトでデザインが存在しない状況に遭遇することは避けられず、PS基盤が弱い私にとっては非常に怖いです。仕方なく独学でUIの知識を学びましたが、CSSで実現できる一部の背景スタイルについては、それでも習得した知識を活かして頑張って実装しました。この記事で主に共有しているのは、背景画像をデザインする際に私が最もよく遭遇し、以前は無視していた CSS3 属性であるグラデーションです。

1. Linear-gradient 線形勾配。基本的な使用形式は次のとおりです:background:linear-gradient(red,black); 実装スタイルは次のとおりです:

グラデーションの方向は次のとおりです。また、background-image:linear-gradient(45deg,red,black); などの角度値も使用します。

次のような複数の背景色のグラデーションも使用します。 );

次のように背景色の開始座標を設定します。

グラデーションなし、background-image ：linear-gradient(to right,red 25%, yellow 25%, yellow 50%,black 50%,black 100%);

2.radial-gradient 放射状のグラデーション。基本的な使用形式:background-image:radial-gradient(red,black);

次のようなパラメータを使用した放射状グラデーション。

3. 縞模様の背景など組み合わせて使用​​します:

background-color: red;background:     linear-gradient(90deg,blue 15px,transparent 0),    linear-gradient(90deg,black 30px,transparent 0),    linear-gradient(90deg,yellow 45px,transparent 0);    background-size: 45px;

最初に入力したグラデーション属性のレベルが高いので、後から使用する属性を表示するには透明を使用します。

白黒レンガ、

background-color: #fff;background-image:     linear-gradient(45deg,#000 7px,transparent 0),    linear-gradient(45deg,#000 7px,transparent 0),    linear-gradient(225deg,#000 7px,transparent 0),    linear-gradient(225deg,#000 7px,transparent 0);background-size:20px;background-position: 0 0 ,10px 9px,20px 18px,10px 9px;

4. 2 つの新しい属性:repeat-linear-gradient とrepeat-radial-gradient

.repeat-linear{    background:    repeating-linear-gradient(red,black 5%);}.repeat-radial{    background:    repeating-radial-gradient(red,black 5%);}

上記のコード実装はすべて、高度な For を使用していますブラウザと互換性の問題については、Baidu を参照してください。